Tailwind UI Pattern Registry for humans and agents

sticky stack scroll cards cascade deck overlay position feature showcase with scroll-driven reveals roadmap or timeline with stacking cards landing page section transitions product comparison scroll experience want cards that stack on scroll without JS need Apple-style cascading scroll sections want scroll-driven card overlay effect

Sticky Stack

Fetch snippet JSON: curl https://webspire.de/snippets/scroll/sticky-stack.json
Format
Preview
Stage Background
Customize

Quick Start

<div class="sticky-stack"><div class="sticky-stack-card">Card 1</div><div class="sticky-stack-card">Card 2</div></div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
1011 bytes · 53 lines
Custom Properties
--stack-gap--stack-inset--stack-bottom
Classes
.sticky-stack.sticky-stack-card
sticky stack scroll cards cascade deck overlay position

Cards that position: sticky to the bottom of the viewport, stacking on top of each other as you scroll. Each subsequent card has a lower z-index and wider margin-inline, creating a perspective-like cascading deck. Falls back to normal flow on mobile.

Feature showcase

<div class="sticky-stack">
  <div class="sticky-stack-card rounded-xl border border-stone-200 bg-white p-12 shadow-lg">
    <h3 class="text-2xl font-bold">300+ Components</h3>
    <p class="mt-2 text-stone-500">Every UI element you need, ready to drop in.</p>
  </div>
  <div class="sticky-stack-card rounded-xl border border-stone-200 bg-white p-12 shadow-lg">
    <h3 class="text-2xl font-bold">AI Page Generator</h3>
    <p class="mt-2 text-stone-500">Build full pages with a single prompt.</p>
  </div>
  <div class="sticky-stack-card rounded-xl border border-stone-200 bg-white p-12 shadow-lg">
    <h3 class="text-2xl font-bold">Figma Integration</h3>
    <p class="mt-2 text-stone-500">Design tokens and variables synced from Figma.</p>
  </div>
</div>

Dark variant with tighter stacking

<div class="sticky-stack" style="--stack-inset: 10px; --stack-bottom: 15px; --stack-gap: 1rem;">
  <div class="sticky-stack-card rounded-xl border border-white/10 bg-slate-900 p-10 shadow-xl">
    <h3 class="text-xl font-bold text-white">Step 1</h3>
    <p class="mt-2 text-slate-400">Foundation and core components.</p>
  </div>
  <div class="sticky-stack-card rounded-xl border border-white/10 bg-slate-900 p-10 shadow-xl">
    <h3 class="text-xl font-bold text-white">Step 2</h3>
    <p class="mt-2 text-slate-400">Advanced blocks and templates.</p>
  </div>
  <div class="sticky-stack-card rounded-xl border border-white/10 bg-slate-900 p-10 shadow-xl">
    <h3 class="text-xl font-bold text-white">Step 3</h3>
    <p class="mt-2 text-slate-400">AI-powered generation and Figma sync.</p>
  </div>
</div>