Scroll Stack
Pinned cards that stack, turn and dissolve as the page scrolls
Customize
Props
18| Name | Type | Default | Description |
|---|---|---|---|
items | ScrollStackItem[] | 5 cards | Cards rendered by the built-in layout. Each accepts eyebrow, title, body, image and accent. |
children | ReactNode | undefined | Custom cards, one per child. Supplying children replaces the built-in card layout entirely. |
variant | "stack" | "deck" | "fade" | "flip" | "zoom" | "reveal" | "stack" | Which stacking animation runs as the cards change over. |
scrollLength | number | 1 | Viewport heights of scrolling assigned to each card. |
peek | number | 26 | Pixels a covered card slides up so its edge peeks out. |
scaleStep | number | 0.07 | How much a covered card shrinks per step, from 0 to 1. |
blur | number | 4 | Maximum blur in pixels applied to covered cards. Set 0 to disable the filter entirely. |
dim | number | 0.28 | How far covered cards darken, from 0 to 1. |
smooth | number | 0.16 | Scroll follow damping. 0 tracks the scrollbar exactly, higher values trail behind it. |
depth | number | 3 | How many covered cards stay mounted behind the active one. Lower is cheaper to render. |
cardWidth | number | 880 | Maximum card width in pixels. |
cardHeight | number | 0.68 | Card height as a fraction of the viewport. |
borderRadius | number | 22 | Corner radius of the cards in pixels. |
perspective | number | 1400 | Perspective depth in pixels used by the flip variant. |
showProgress | boolean | true | Show the progress rail under the stack. |
showCounter | boolean | true | Show the numeric counter under the stack. |
onIndexChange | (index: number) => void | undefined | Fired whenever the frontmost card changes. |
className | string | undefined | Extra classes for the outer section. |
itemsScrollStackItem[]Cards rendered by the built-in layout. Each accepts eyebrow, title, body, image and accent.
5 cardschildrenReactNodeCustom cards, one per child. Supplying children replaces the built-in card layout entirely.
undefinedvariant"stack" | "deck" | "fade" | "flip" | "zoom" | "reveal"Which stacking animation runs as the cards change over.
"stack"scrollLengthnumberViewport heights of scrolling assigned to each card.
1peeknumberPixels a covered card slides up so its edge peeks out.
26scaleStepnumberHow much a covered card shrinks per step, from 0 to 1.
0.07blurnumberMaximum blur in pixels applied to covered cards. Set 0 to disable the filter entirely.
4dimnumberHow far covered cards darken, from 0 to 1.
0.28smoothnumberScroll follow damping. 0 tracks the scrollbar exactly, higher values trail behind it.
0.16depthnumberHow many covered cards stay mounted behind the active one. Lower is cheaper to render.
3cardWidthnumberMaximum card width in pixels.
880cardHeightnumberCard height as a fraction of the viewport.
0.68borderRadiusnumberCorner radius of the cards in pixels.
22perspectivenumberPerspective depth in pixels used by the flip variant.
1400showProgressbooleanShow the progress rail under the stack.
trueshowCounterbooleanShow the numeric counter under the stack.
trueonIndexChange(index: number) => voidFired whenever the frontmost card changes.
undefinedclassNamestringExtra classes for the outer section.
undefined