Scroll Stack

Pro

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

carouselcss 3d3dstackcardsscrollstickydepth

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

 1import { IconChartLine, IconDeviceDesktop, IconFileText } from "@tabler/icons-react";
 2import { ScrollStack, type ScrollStackCard } from "@/components/wensity/scroll-stack";
 3
 4const cards: ScrollStackCard[] = [
 5  { id: "design", icon: <IconDeviceDesktop />, title: "Web Design",
 6    description: "Pixel-perfect websites built for conversion and delight." },
 7  { id: "content", icon: <IconFileText />, title: "Content Strategy",
 8    description: "Messaging that resonates and content that converts." },
 9  { id: "seo", icon: <IconChartLine />, title: "SEO & Growth",
10    description: "We get you found by the right people at the right time." },
11];
12
13export default function Example() {
14  // Each card gets a full-viewport panel; the pile forms at screen center.
15  return <ScrollStack cards={cards} cardWidth={350} cardHeight={410} />;
16}

Props

Prop	Type	Default	Description
`cards`	ScrollStackCard[]	-	Cards that pin, tilt, and stack into a deck.
`cardWidth`	number	350	Card width in pixels.
`cardHeight`	number	410	Card height in pixels.
`useWindowScroll`	boolean	true	When true, panels are viewport-height and pin against the window. When false, uses an internal scroller.
`height`	number	560	Panel/scroller height when useWindowScroll is false.

Featured in React 3D components and React carousel components.