Scroll Stack
Cards & Layout
Scroll-driven card stack where cards progressively reveal, scale up, and rotate as the user scrolls through the viewport.
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | required | ScrollStackItem elements to stack. |
itemHeight | number | 300 | Height in pixels of each card. |
spacing | number | 100 | Vertical scroll distance between card trigger points. |
baseScale | number | 0.85 | Starting scale for cards before they enter. |
scaleIncrement | number | 0.03 | Scale reduction per layer for cards behind. |
rotationAmount | number | 0 | Maximum rotation in degrees as cards enter. |
className | string | '' | Additional classes for the container. |