ProScroll

Stack Scroll

Cards that pin and pile into a deck as you scroll.

Loading
Usage 
import { StackScroll } from "./StackScroll";

<StackScroll>
  <article>…</article>
  <article>…</article>
  <article>…</article>
</StackScroll>

About

Each card pins below the last with position: sticky, then the next one slides up over it while the cards beneath ease back, a little smaller and darker, so the pile reads as real depth. No scroll-jacking: the page scrolls normally and one animation frame per scroll sets each card's scale and shade. Any content works as a card — pass them as children.

What you get

  • Rebuild prompt

    One paste into Claude Code, Cursor, Codex or v0 rebuilds it byte for byte.

  • Source

    StackScroll.tsx + StackScroll.css — plain React and CSS, every comment kept.

  • Vite project

    A ready-to-run project with this exact example and pinned versions — unzip, install, run.

More like this

All components
↕ScrollNewPro
Open live demo →

Aperture Zoom

Scroll

A framed image that opens to full-bleed as you scroll, parting the headline.

↕ScrollNewFree
Open live demo →

Ink Reveal

Scroll

A paragraph that fills in word by word as you scroll through it.

↕ScrollNewPro
Open live demo →

Horizontal Rail

Scroll

Scroll down, travel sideways: a pinned rail of panels with parallax.