Overlapping card stack reveals on scroll with depth layering.
Scroll inside the preview: each card pins, scales down and stacks under the next one. Every prop is wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
default slot | ScrollStackItem[] | required | The content to be displayed in the scroll stack. Should contain ScrollStackItem components. |
itemDistance | number | 100 | Distance between stacked items in pixels. |
itemScale | number | 0.03 | Scale increment for each stacked item. |
itemStackDistance | number | 30 | Distance between items when they start stacking. |
stackPosition | string | "20%" | Position where the stacking effect begins as a percentage of viewport height. |
scaleEndPosition | string | "10%" | Position where the scaling effect ends as a percentage of viewport height. |
baseScale | number | 0.85 | Base scale value for the first item in the stack. |
scaleDuration | number | 0.5 | Duration of the scaling animation in seconds. |
rotationAmount | number | 0 | Rotation amount for each item in degrees. |
blurAmount | number | 0 | Blur amount for items that are further back in the stack. |
useWindowScroll | boolean | false | Whether to use window scroll for the stack. |
@stack-complete | () => void | - | Emitted when the stack animation is complete. |
| Prop | Type | Default | Description |
|---|---|---|---|
default slot | VNode | - | The card content. Extra classes fall through onto the card element. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Arrow Up + Arrow Down + Page Up + Page Down | Scroll the stack when its container has focus. |