Stacked Brand Cards
A services section where every card but the last pins at the same line and stays there until the outro reaches it, so the deck builds up in place instead of scrolling past. While a card is pinned its inner panel is pulled upward by an amount that grows with how many cards are still to come, which is what makes the pile compress from the bottom rather than simply overlapping. The intro heading is pinned across the whole run on a separate trigger, so it holds until the final card takes the line. GSAP ScrollTrigger and Lenis.
npx shadcn@latest add https://ui.aryank.space/r/stacked-brand-cards.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 | StackedBrandCard[] | 4 BLANK services | Title, copy, image, and background per card. The last card does not pin, it scrolls over the pile. |
| heroImage | string | BLANK hero | Opening full-bleed image. |
| embedded | boolean | true | Own the scroll container. Set false to drive it from the window scroll. |
introHeadingtextThe pinned line above the deck.
outroHeadingtextClosing line that releases the pins.
gsaplenis



