ScrollStack
scroll-stackStacks content cards progressively as the page scrolls.
Usage
Basic usage
Wrap each card in ScrollStackItem, each card being pinned to the top, stacked one on top of another, and scaled as you scroll down. A fixed-height container with a rollable interior is required.
Collection
Multi-source data access and cleaning, unified into the metadata layer.
Modeling
Low-code visual modeling, precipitating business semantics.
Arrangement
The node canvas arranges task links and executes them in topological order.
Insights
Real-time large screen and indicator board drive decision-making closed loop.
<div className="h-[28rem] overflow-hidden rounded-xl border border-border">
<ScrollStack>
<ScrollStackItem>Card 1</ScrollStackItem>
<ScrollStackItem>Card 2</ScrollStackItem>
<ScrollStackItem>Card 3</ScrollStackItem>
</ScrollStack>
</div>Sector rotation
rotationAmount Superimpose rotation increments on each layer of cards to form a poker-style fan-shaped dislocation.
Collection
Multi-source data access and cleaning, unified into the metadata layer.
Modeling
Low-code visual modeling, precipitating business semantics.
Arrangement
The node canvas arranges task links and executes them in topological order.
Insights
Real-time large screen and indicator board drive decision-making closed loop.
<ScrollStack rotationAmount={3}>
<ScrollStackItem>Card 1</ScrollStackItem>
<ScrollStackItem>Card 2</ScrollStackItem>
</ScrollStack>Blurred depth of field
When blurAmount > 0, the cards further down are blurred to enhance depth; when reduced-motion, it is automatically turned off.
Collection
Multi-source data access and cleaning, unified into the metadata layer.
Modeling
Low-code visual modeling, precipitating business semantics.
Arrangement
The node canvas arranges task links and executes them in topological order.
Insights
Real-time large screen and indicator board drive decision-making closed loop.
<ScrollStack blurAmount={2}>
<ScrollStackItem>Card 1</ScrollStackItem>
<ScrollStackItem>Card 2</ScrollStackItem>
</ScrollStack>Compact stacking
Make itemDistance smaller, baseScale larger, and itemStackDistance shorter to make the card more tightly packed.
Collection
Multi-source data access and cleaning, unified into the metadata layer.
Modeling
Low-code visual modeling, precipitating business semantics.
Arrangement
The node canvas arranges task links and executes them in topological order.
Insights
Real-time large screen and indicator board drive decision-making closed loop.
<ScrollStack itemDistance={60} baseScale={0.92} itemStackDistance={20}>
<ScrollStackItem>Card 1</ScrollStackItem>
<ScrollStackItem>Card 2</ScrollStackItem>
</ScrollStack>When to use
Use ScrollStack for a narrative section where cards pin and stack as the user scrolls, such as feature explanations or process steps. Use InfiniteMenu for draggable spherical exploration, or FlyingPosters for a flying poster corridor.
Import
import { ScrollStack, ScrollStackItem } from "@hulianui/ui"Props
ScrollStack:
| Name | Type | Default | Description |
|---|---|---|---|
| itemDistance | number | 100 | Initial vertical distance between cards in pixels. |
| itemScale | number | 0.03 | Scale increment between adjacent cards. |
| itemStackDistance | number | 30 | Vertical offset between pinned cards in pixels. |
| stackPosition | string | "20%" | Container position at which a card starts pinning. |
| scaleEndPosition | string | "10%" | Position at which a card reaches its target scale. |
| baseScale | number | 0.85 | Base scale of the first, lowest card. |
| rotationAmount | number | 0 | Rotation increment per stacked layer in degrees. |
| blurAmount | number | 0 | Blur increment for lower cards in pixels; disabled under reduced motion. |
| className | string | — | Class name added to the scroll root. |
| style | CSSProperties | — | Inline styles forwarded to the scroll root. |
Events
| Event | Type | Description |
|---|---|---|
| onStackComplete | () => void | Called when the last card enters the pinning region. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Card content, normally wrapped in ScrollStackItem; elements marked data-scroll-stack-card participate. |
ScrollStackItem accepts { children?: ReactNode; itemClassName?: string }.
Usage notes
- The outer viewport must have a fixed height and
overflow-hidden; otherwise there is no scroll distance for pinning. - Wrap cards in
ScrollStackItemor adddata-scroll-stack-cardso they are included in measurements. - Reduced motion switches to a static layout and disables
blurAmount. Do not rely on stacking to convey essential information.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
Collection
Multi-source data access and cleaning, unified into the metadata layer.
Modeling
Low-code visual modeling, precipitating business semantics.
Arrangement
The node canvas arranges task links and executes them in topological order.
Insights
Real-time large screen and indicator board drive decision-making closed loop.
<div className="h-[28rem] overflow-hidden rounded-xl border border-border">
<ScrollStack
itemDistance={100}
itemScale={0.03}
baseScale={0.85}
rotationAmount={0}
blurAmount={0}
>
<ScrollStackItem>Card 1</ScrollStackItem>
<ScrollStackItem>Card 2</ScrollStackItem>
<ScrollStackItem>Card 3</ScrollStackItem>
</ScrollStack>
</div>