scroll-stacked-cards-deck

Installation
SKILL.md

Stacking Card Deck Scroll Section

What this builds

A full scroll section where 3-7 content cards stack on top of each other as the user scrolls. Each card pins at the viewport top and the next card slides in from below, covering the previous one (or the previous one scales down and recedes). The result is a "deck of cards" that builds up as you scroll and disassembles on scroll-up. The section is wrapped in narrative beats with act-level pacing.

  • Cards pin at viewport top and stack with decreasing scale and increasing shadow per layer
  • Each card's arrival is a distinct scroll beat with its own vh budget
  • Cards have unique visual identity (not identical templates with swapped text)
  • z-index managed automatically: newest card on top
  • Scale recession: each buried card shrinks by a fixed step (e.g. 0.95x, 0.90x, 0.85x)
  • Shadow depth: buried cards gain increasing box-shadow to reinforce depth
  • Optional: cards shift Y slightly upward as they recede, creating a visible "stack edge"
  • prefers-reduced-motion fallback: vertically stacked static cards, no pinning
  • Mobile: reduced pin duration, fewer visible stack edges, or static layout below 768px
Installs
2
First Seen
Aug 30, 2026
scroll-stacked-cards-deck — avnehsbhatia/ultraui