← All effects
Sticky Stack Cards
scroll inside ↓
-- fps
prefers-reduced-motion detected — cards stack without shrinking
X-ray · layers
cards pin at the same spot
covered cards step back
the deck falls into shadow
Parameters
Cards4
Shrink per card0.05
Dim per card0.25
Peek offset12 px
your version · updates as you tinker
How this effect works
The hit scroll pattern of 2025-26, and it's barely code: every card is position: sticky with the same top. As you scroll, card 2 travels up until it hits that top — where card 1 is already pinned — and simply covers it. The browser handles all of the pinning; the layout does the storytelling.
JS adds the depth reading: for each covered card we measure how far the next card has climbed over it (0→1), and spend that number on scale and brightness. A covered card steps back by shrink per card and falls into shadow by dim per card, so the pile reads as physically receding — a deck, not a glitch of overlapping rectangles. The peek offset shifts each card's pin line down a few pixels so you always see the edges of the deck above the current card.
Production notes: prefers-reduced-motion: cards stack (that's layout) without the scale/dim motion · transforms + filter only · cards must have real height between them — the travel IS the story · the copied snippet is self-contained with its own demo scroll box.