Stack Cards
NewPremiumCards that stack on scroll with sticky positioning and cascade effect. Each card slides into view and compresses previous ones.
cardsscrollstacksticky
Installation
Terminalbash
npx motioncraft add stack-cardsUsage
stack-cards.tsxtsx
import { StackCards } from "@/components/cards/stack-cards";
<StackCards cards={[
{ id: 1, content: <div>Card 1</div> },
{ id: 2, content: <div>Card 2</div> },
{ id: 3, content: <div>Card 3</div> },
]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cards* | StackCard[] | — | Array of card objects with id and content |
| offset | number | 30 | Vertical offset between stacked cards |
| className | string | — | Container CSS classes |
| cardClassName | string | — | Individual card CSS classes |