Card Stack Scroll

Card Stack Scroll is a React sticky stacking cards component built with CSS position: sticky and Motion's useScroll. As you scroll, each card pins to the top and stacks over the previous one, and covered cards gradually scale down into the background.

Playground

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<CardStackScroll/>

    </div>
  );
}

When to use

• Walking through three to five core features on a product landing page, one per card
• Portfolio or case study pages with one project per card
• "How it works" steps that readers scroll through one at a time
• Setting up use cases before a pricing comparison
• Not a good fit: when users should swipe between cards independently of page scroll, use Stacked Peek Carousel

Installation

npx webberui@latest add https://webberui.com/r/card-stack-scroll.en.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>

Examples

With a fixed navigation bar

With a 64px fixed header, set offsetTop a little higher than the header so cards don't pin underneath it. Cards overlap, so give them an opaque background.

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

const features = [
  { title: "Automatic backups", body: "Hourly backups, kept for 30 days." },
  { title: "Team permissions", body: "View, edit and admin access by role." },
  { title: "Audit log", body: "Every action recorded with time and user." },
];

export function FeatureStack() {
  return (
    <CardStackScroll
      offsetTop={88}
      peek={16}
      cardClassName="h-[420px] rounded-2xl border bg-white p-10 shadow-lg dark:bg-neutral-900"
    >
      {features.map((f) => (
        <article key={f.title}>
          <h3 className="text-2xl font-semibold">{f.title}</h3>
          <p className="mt-3 text-neutral-600 dark:text-neutral-400">{f.body}</p>
        </article>
      ))}
    </CardStackScroll>
  );
}

cardClassName is applied to each card's animated layer, which saves repeating the same classes on every child.

Tune the depth of the stack

peek sets how much of each card behind stays visible, and scaleStep sets how much each layer shrinks. The last card never scales, and earlier cards shrink the most.

<CardStackScroll peek={24} scaleStep={0.06}>
  <div className="h-96 rounded-xl bg-indigo-600 p-8 text-white">Step 1: Connect a data source</div>
  <div className="h-96 rounded-xl bg-indigo-500 p-8 text-white">Step 2: Schedule syncs</div>
  <div className="h-96 rounded-xl bg-indigo-400 p-8 text-white">Step 3: Publish the dashboard</div>
</CardStackScroll>

Props

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)

FAQ

The cards scroll away instead of sticking. Why?

Positioning relies on position: sticky. If an ancestor between the cards and the scroll container has overflow: hidden or overflow: auto, sticky stops working. Inside a nested scroll area, pass that scroll container's ref to container.

Does it work with the Next.js App Router?

Yes. The source already has "use client", and the children can be content rendered by Server Components, passed in as children. The reduced-motion static version switches in after mount, so the first render matches the server output.

How does it perform?

Scaling only touches transform (cards have will-change-transform), so it does not trigger layout. Scroll progress comes from Motion's useScroll; the component adds no scroll listeners of its own.

What happens with reduced motion enabled?

The cards render as a plain vertical list with gap-6, without pinning or scaling.

What are the dependencies?

motion, clsx, tailwind-merge, and the cn helper in @/lib/utils. Without the CLI, copy the source from the Manual tab.