Scroll Stack
Pro
Cards that pin as you scroll and pile up, the ones underneath shrinking and dimming.
How we work
Four steps, one stack
Scroll inside this panel.
01
Plan
One page per feature: the problem, who has it and what done looks like.
02
Build
Small pull requests behind flags, reviewed the same day.
03
Ship
Every merge goes to production. Rollbacks take one click.
04
Measure
We read the numbers a week later and keep or cut the feature.
That is the whole process.
Customize
18px
0.05
Progress bars
Installation
Scroll Stack is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy scroll-stack.tsx into components/ui and run npm install motion.
Usage
import { ScrollStack } from "@/components/ui/scroll-stack";
<ScrollStack
showProgress
cards={steps.map((s) => ({ id: s.id, content: <Step {...s} />, color: s.color }))}
/>Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| cards | { id, content, color?, textColor? }[] | — | Cards in order. |
| stackOffset | number | 20 | Vertical step between pinned cards, in pixels. |
| scaleStep | number | 0.05 | How much a card shrinks for each card stacked on top of it. |
| top | number | 24 | Where the first card pins, in pixels from the top of the scroll area. |
| cardHeight | number | 260 | Card height in pixels. Fixed, so the stack is computed exactly. |
| gap | number | 160 | Scroll distance between cards before they meet, in pixels. |
| darken | number | 0.18 | Darkness added per card stacked on top. |
| showProgress | boolean | false | A thin bar on each card that fills as you scroll through it. |
| scrollContainerRef | RefObject<HTMLElement | null> | — | The element that scrolls. Defaults to the page; give it a non-static position. |
| className | string | — | Extra classes for the list. |
Dependencies: motion