Customize
Titles4 items
Descriptions4 items
Layer Depth
50
Shimmer Speed
100
Grid Lines
12
Snap to Layers
Film Grain
Background
Text Color
Font
Text Scale
100%
Auto Play
Isometric Stack Scroll
Animations 203 views•88 uses
Props
12 propertiestitlesstring[]4 imagesdescriptionsstring[]4 imagesdepthnumber50shimmerSpeednumber100lineOpacitynumber12snapbooleantrueshowGrainbooleantruebackgroundcolor#0d0d0dtextColorcolor#fffffffontFamilystringvar(--font-inter)…textScalenumber100autoPlaybooleanfalseGet this component
Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.
npx spark-ui-registry@latest add isometric-stack-scrollWrites to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.
A pinned scroll scene: an isometric stack of hardware-like layers down a ruled grid, that opens up as you scroll. The layers start closed up in a tight pile; each scroll step lifts the next one out to the centre and fades in its label, alternating left and right. At the centre its sides turn iridescent, its pins light up and a connector runs out to the label.
KEY FEATURES
- ·Every slab is a flat rounded square projected through one isometric matrix, so rims, inset panels and the icon on top all stay true to the angle
- ·The side walls are the bottom face plus the band between the two silhouettes, filled with a reflecting gradient that drifts for a slow shimmer
- ·Scrolling sets a target layer and the scene eases toward it, so a flick glides through the stack instead of jumping
- ·Layers still waiting stay packed beneath the one at the centre, so the stack visibly unstacks one unit at a time; snap points hold one layer per step
- ·The active label brightens while an accent bar grows along its column edge and a connector draws out from the slab