Analytics
Realtime insight across every surface
Scroll Stack
Cards that pin and scale into a stack as you scroll an internal viewport.
scrollmotionlayout
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Layout
Viewport height420px
Card height260px
Top offset32px
Peek stagger14px
Scroll gap28px
Motion
Scale step0.05
How much a covered card shrinks.
Settle rotation0°
Style
Corner radius20px
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ScrollStackItem[] | gradient set | Cards to stack ({ title, subtitle?, background? }). |
itemHeight | number | 260 | Card height in pixels. |
topOffset | number | 32 | Sticky top offset for the first card, in pixels. |
stagger | number | 14 | Extra sticky-top added per card so stacked cards peek, in pixels. |
scaleStep | number | 0.05 | Scale reduction applied to a card as the next scrolls over it. |
gap | number | 28 | Vertical gap between cards while scrolling, in pixels. |
rotate | number | 0 | Degrees of rotation applied to a settling card (0 disables). |
radius | number | 20 | Card corner radius in pixels. |
height | number | 420 | Height of the internal scroll viewport, in pixels. |
label | string | "Scroll stack" | Accessible name for the stack region. |