Layout

Pinned Card Stack Scroll

A vertical sequence of cards that pin in place and shrink slightly as the next card scrolls up to stack on top of it.

Capture the brief

Sketch the flow

Build the pieces

Ship the release

Measure the impact

Using Pinned Card Stack Scroll

A vertical sequence of cards that pin in place and shrink slightly as the next card scrolls up to stack on top of it.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: itemDistance, itemScale, baseScale, rotationAmount

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2342Drag split panelsLayoutPanels divided by thin draggable handles that resize the adjacent panes in real time, arranged in a row or stacked.

2351Expanding panel galleryLayoutA row of cover panels where hovering, clicking, or arrow-keying to one expands it to full width while the rest compress into slivers.

2357Focus scroll listLayoutA scrollable queue whose rows pop into full size and opacity as they reach the center of view, with hover and keyboard selection.

2381Locked ratio frameLayoutA container that keeps its content locked to a chosen width-to-height ratio no matter how wide it stretches.

1532Masonry flowLayoutA masonry wall that packs tiles of varying height into columns, lifts each one in as it scrolls into view, and re-seats the whole grid when the column count changes.

2424Settling photo masonryLayoutA masonry grid of variable-height photo tiles that fly in from off screen and settle into their packed columns, blurring into focus as they land.