Each card pins to the top as you scroll, and the next one slides up underneath it — creating a physical stack of cards growing on top of each other.
Instead of normal sections that scroll away, each "card" sticks to the top of the viewport when it reaches it, and the next card slides up over it. By the end of the scroll, you have a deck of cards stacked on top of each other, with the latest one visible. Used by Apple product pages, Linear, Vercel pricing, and almost every modern long-scroll storytelling page.
Each card has position: sticky; top: 80px with the same parent. Crucially, give each card an increasing top offset (80px, 100px, 120px) — that's what makes them stagger as they stack, so you can see the colored top edge of the previous one peeking out. Add big margin-bottom so each card sticks for a full viewport before unsticking. Wrap in a parent that's tall enough (the parent's height controls how long each card stays pinned).
Scroll inside. Cards stack on top of each other as you go.
Compile in under 80ms. Hot-reload that actually reloads what changed and nothing else.
PerformanceNo popups. No engagement nudges. The product surface gets out of your way as you work.
DesignSOC 2, end-to-end encryption, signed builds. The reliability nobody likes to write copy about.
SecurityHalf the team writes code, the other half writes back to customers. The split is honest.
TeamBuild a sticky stacking-cards section. Wrap 4 large cards in a single parent. Each card: position:sticky, padding:48px, border-radius:22px, max-width:700px, margin:0 auto 80px (the margin-bottom gives the scroll distance each card pins for). CRITICAL: each card needs an INCREASING top offset so they stagger when stacked — card 1: top:80px, card 2: top:100px, card 3: top:120px, card 4: top:140px. As the user scrolls, each card pins to the top in turn; previous cards stay underneath with their top edge visible (because of the stagger). Each card has a different gradient background (violet, pink, cyan, amber), a small uppercase eyebrow ("01 / Speed"), a big italic-mix display headline, a paragraph, and a glass-pill tag at the bottom. Add a sticky hint badge at the very top "↓ scroll to stack". Parent container has overflow-y:scroll so the effect is scoped to the demo.