Wensity

Scroll Stack

Pro

Cards that pin, tilt, and stack into a tidy deck as you scroll, with zero scroll hijacking anywhere in the sequence.

css 3d3dstackcardsscrollstickydepth
Scroll Stack component preview

Overview

Scroll Stack is a React and Tailwind CSS scroll animation where cards ride up, pin in the center, and twist into a loose pile as you scroll, in Next.js or any React app, built on Framer Motion. Pinning is plain CSS sticky, and a single scroll linked motion value drives every pose, so nothing re-renders per frame and scrolling is never hijacked. Landed cards keep peeking out at their own angles, and reduced motion drops the tilt. Each card is one full height panel, so ten cards make the section ten screens tall.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add scroll-stack

Usage

Import ScrollStack from @/components/wensity/scroll-stack and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
// The example icons come from @tabler/icons-react: npm i @tabler/icons-react
import { IconChartLine, IconDeviceDesktop, IconFileText } from "@tabler/icons-react";
import { ScrollStack, type ScrollStackCard } from "@/components/wensity/scroll-stack";


const cards: ScrollStackCard[] = [
  { id: "design", icon: <IconDeviceDesktop />, title: "Web Design",
    description: "Pixel-perfect websites built for conversion and delight." },
  { id: "content", icon: <IconFileText />, title: "Content Strategy",
    description: "Messaging that resonates and content that converts." },
  { id: "seo", icon: <IconChartLine />, title: "SEO & Growth",
    description: "We get you found by the right people at the right time." },
];


export default function Example() {
  // Each card gets a full-viewport panel; the pile forms at screen center.
  return <ScrollStack cards={cards} cardWidth={350} cardHeight={410} />;
}

Props

PropTypeDefaultDescription
cardsScrollStackCard[]-Cards that pin, tilt, and stack into a deck.
cardWidthnumber350Card width in pixels.
cardHeightnumber410Card height in pixels.
useWindowScrollbooleantrueWhen true, panels are viewport-height and pin against the window. When false, uses an internal scroller.
heightnumber560Panel/scroller height when useWindowScroll is false.

Related components

  • Split-Flap Display component preview

    Split-Flap Display

    A ceramic and graphite split-flap device that ripples each flap into your message.

  • Interactive 3D Globe component preview

    Interactive 3D Globe

    A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.

  • Animated Code Diff Viewer component preview

    Animated Code Diff Viewer

    Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.

  • Animated Terminal component preview

    Animated Terminal

    A terminal UI with self-typing commands, CRT phosphor glow and scanlines, streaming output that never re-renders a line.

Featured in React 3D components.