Isometric Stack Scroll

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 properties
titlesstring[]4 images
One layer per title, top to bottom.
descriptionsstring[]4 images
Paragraph under each title.
depthnumber50
Thickness of each slab.
shimmerSpeednumber100
Drift of the iridescent sides. 0 holds them still.
lineOpacitynumber12
Opacity of the ruled grid.
snapbooleantrue
Settle on one layer per scroll step.
showGrainbooleantrue
Overlay a subtle noise texture.
backgroundcolor#0d0d0d
Backdrop colour.
textColorcolor#ffffff
Colour of the labels and lines.
fontFamilystringvar(--font-inter)…
Typeface for the labels.
textScalenumber100
Relative size of the text.
autoPlaybooleanfalse
Steps through the layers on its own until the frame is scrolled.

Get 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-scroll

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

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