Card Stack Scroll

A scroll effect where cards stick to the top one after another, stacking up and shrinking away layer by layer.

Loading preview…

npx shadcn@latest add https://webberui.com/r/card-stack-scroll.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Sticky position (px)offsetTop

Stagger distance per layer (px)peek

Scale-down per layerscaleStep

0.04

<CardStackScroll />

Installation

npx shadcn@latest add https://webberui.com/r/card-stack-scroll.json

Usage

Each direct child becomes one card in the stack:

import { CardStackScroll } from "@/components/ui/card-stack-scroll";

<CardStackScroll offsetTop={96}>
  <div className="h-80 rounded-xl border bg-white p-8">First</div>
  <div className="h-80 rounded-xl border bg-white p-8">Second</div>
  <div className="h-80 rounded-xl border bg-white p-8">Third</div>
</CardStackScroll>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Each direct child becomes one card
`offsetTop`	`number`	`96`	Position where cards stick to the top (px)
`peek`	`number`	`12`	Downward offset of each layer while stacked (px)
`scaleStep`	`number`	`0.04`	How much each layer shrinks as it stacks in
`container`	`RefObject<HTMLElement>`	—	When scrolling happens inside a nested overflow container, pass that container's ref
`cardClassName`	`string`	—	Applied to the outer wrapper of every card

How it works

Driven by useScroll + useTransform; the animation runs on transforms, so it never triggers layout
When the user has "reduce motion" enabled at the system level, it degrades to a plain vertical list
The container can be the page itself, or any overflow-y: auto section (as in the demo above)