Sticky Stack Cards
Full-height cards that pin in place and stack. As the next card scrolls up over the current one, the underlying card scales down, tilts a few degrees in alternating directions, and darkens under a shadow overlay, so the deck compresses into a layered pile. GSAP ScrollTrigger.
The Foundations
01
Modularity
(About the state)
Every element is built to snap into place. We design modular systems where clarity, structure, and reuse come first, with no clutter and no excess.
02
Materials
(About the state)
From soft gradients to hard edges, our design language draws from real world materials, elevating interfaces that feel both digital and tangible.
03
Precision
(About the state)
Details matter. We work with intention, aligning pixels, calibrating contrast, and obsessing over every edge until it just feels right.
04
Character
(About the state)
Interfaces should have personality. We embed small moments of play and irregularity to bring warmth, charm, and a human feel to the digital.
Ends in Form
npx shadcn@latest add @compronents/sticky-stack-cardsInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| cards | StickyStackCard[] | Four BLANK principle cards | Index, title, image, and description per card. |
| intro / outro / captionLabel | string | The Foundations / Ends in Form / (About the state) | Opening panel, closing panel, and card caption. |
| embedded | boolean | true | Owns the scroll container so it fits a bounded box. |
cardstextIndex, title, image, and description per card.
cards[].imageasset-urlFeature image inside each card.
intro / outro / captionLabeltextOpening panel, closing panel, and the small caption.
gsaplenis