Tilt Card Stack
Full-screen colored cards that pin and fall back as the next one climbs over them. Each card holds until the following card reaches the top of the frame, then tilts away on its X axis, sinks in Z, and darkens under a black veil, so the deck reads as pages laid down one behind another. GSAP ScrollTrigger with Lenis.
Art That Lives Online
A surreal dive into neon hues and playful decay
Reverie
A psychedelic skull study exploring the tension between playfulness and decay. Bold candy tones, liquid forms, and crisp vectors bring a surreal, pop-art mood meant for covers and prints.
A retro-futurist scene where nostalgia meets glitch
Vaporwave
An 80s-UI dreamscape: stacked windows, checkerboard floors, and a sunset gradient. Built to feel like a loading screen to another world, nostalgic, glossy, and a bit uncanny.
A kaleidoscope of folk motifs reimagined in digital form
Kaleido
Ornamental symmetry inspired by folk motifs and stained-glass glow. Designed as a seamless, tileable pattern for textiles, wallpapers, and rich UI backgrounds.
A portrait framed by oddball creatures and doodles
Menagerie
A playful portrait surrounded by oddball companions: mascots, monsters, and midnight snacks. Loose linework meets pastel whimsy, perfect for merch, stickers, and editorial spots.
Next Canvas Awaits
npx shadcn@latest add https://ui.aryank.space/r/tilt-card-stack.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | TiltCard[] | Four BLANK artwork cards | Info, title, description, image, and accent color per card. |
| heroHeading / outroHeading | string | BLANK headings | Opening and closing full-screen headings. |
| embedded | boolean | true | Own the scroll container; set false to ride the window scroll. |
cardstextInfo line, title, description, image, and accent per card.
heroHeading / outroHeadingtextThe opening and closing full-screen headings.
gsaplenis