Pinned cards that scale, recede, and stack as the page scrolls — the premium feature-reveal section.

Each card pins to the top of the scroller while the next one rises over it. As a card is buried it eases down to a smaller scale, dims, and blurs — so depth reads even on a flat stack. Scroll the frame below.

Playground

Plan

One source of truth

Issues, docs, and roadmaps live on a single surface your whole team trusts.

12 projectsin sync

Track

Progress you can see

Live insight into velocity and scope — no spreadsheets, no status meetings.

98.2%on-time delivery

Ship

From plan to production

Move work from idea to release without losing the thread along the way.

240msmedian deploy

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/scroll-stack.json"

ScrollStack drives every card from a single scroll progress value. There is no scroll-jacking — the cards are plain position: sticky elements, and the scale, brightness, and blur are interpolated from how far each card has been buried.

Usage

tsx

import { ScrollStack } from "@/components/godui/scroll-stack";

By default the stack tracks the page scroll — the right choice for a full landing-page section. Each card occupies one viewport of scroll distance.

tsx

<ScrollStack>
  <Card>First</Card>
  <Card>Second</Card>
  <Card>Third</Card>
</ScrollStack>

Self-contained scroller

Pass height to make the stack its own scroll viewport — useful inside a bounded region rather than the whole page.

tsx

<ScrollStack height="32rem" pinTop="10%">
  {/* cards */}
</ScrollStack>

Tuning the depth

tsx

<ScrollStack baseScale={0.8} peek={20} blur={false} />

Accessibility

When prefers-reduced-motion is set, ScrollStack renders the cards as a plain vertical list — no pinning, scaling, or blur.

Props

Prop	Type	Default	Description
`height`	`string`	—	When set, the stack becomes its own scroll viewport of this height.
`baseScale`	`number`	`0.86`	Scale of the most-buried card at the back of the stack.
`peek`	`number`	`16`	How far (px) each stacked card peeks below the one in front of it.
`blur`	`boolean`	`true`	Blur buried cards as they recede.
`pinTop`	`string`	`"12vh"`	Distance from the top of the scroller where cards pin.

ScrollStack also forwards every standard <div> attribute to the root element.

Scroll Stack