Scroll Stack React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ScrollStack from "./ScrollStack";

export default function Example() {
  return (
    <ScrollStack
      items={[
        {
          "id": "form",
          "title": "01 - Form",
          "description": "Start with a shape.",
          "background": "radial-gradient(ellipse at 100% 0%, #f4c4a8, transparent 60%), #d3bcaa",
          "color": "#392c2a"
        },
        {
          "id": "colour",
          "title": "02 - Colour",
          "description": "Find a different combination.",
          "background": "radial-gradient(ellipse at 0% 100%, #d4bcdf, transparent 65%), #8d7b9d",
          "color": "#241b2e"
        },
        {
          "id": "motion",
          "title": "03 - Motion",
          "description": "Bring the details to life.",
          "background": "radial-gradient(ellipse at 100% 0%, #9bacaa, transparent 65%), #3f5b60",
          "color": "#f0f4e8"
        }
      ]}
      height={460}
      cardHeight={280}
      gap={70}
      stackOffset={12}
      scaleStep={0.06}
    />
  );
}

Using Scroll Stack

Supply the panels through items and set height for the scrolling viewport. cardHeight should accommodate the content of an individual panel.

stackOffset and scaleStep control how accumulated cards remain visible. Use onActiveChange when the selected panel also drives content outside the stack.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { id, content?, title?, description?, image?, background?, color? }. content accepts a React node. Empty arrays render nothing.
height	number \| string	No	460	Height of the independently scrollable viewport, in pixels or a CSS length.
cardHeight	number	No	280	Height of each card in pixels.
gap	number	No	70	Vertical travel between cards in pixels.
stackOffset	number	No	12	Sticky offset between each layer, in pixels.
scaleStep	number	No	0.06	Scale reduction per card passed, with a minimum scale of 0.75.
onActiveChange	function	No	undefined	Called with the nearest card index as the viewport scrolls.
label	string	No	"Scrollable card stack"	Accessible label for the keyboard-focusable scroll region.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.