Stacking cards

Ordinary sections leave. You scroll past one and it is gone, and whatever it said is now something the reader has to remember. Stacking cards keep them: each section sticks where the last one stopped, the next section rides up over it, and the top of the page slowly fills with a visible pile of everything already read. The gesture is the same scroll, but the metaphor changes from passing by to dealing a deck, and the reader can see how many cards are down and how many are still coming.

The mechanism is almost embarrassingly small. Give every section position: sticky with a top offset a little larger than the one before it, put each later section above the earlier ones in the stacking order, and give them opaque backgrounds. Nothing is measured, nothing is scripted, and the staggered offsets are what leave each stuck card a visible strip at the top, which is the difference between a deck and one card covering another completely. Scroll-driven animations then add the frills people usually associate with the pattern: cards that shrink or dim slightly as they are covered, timed against the covering card’s own progress rather than against the page’s.

The same sticky mechanism serves a completely different intent in a sticky header, which pins one element permanently because its controls are needed throughout; here every section takes a turn at being pinned and then hands the position on, and the pile is the point rather than an accident. It is also not scroll pinning, where the page holds still while an animation plays out against scroll distance; a stacking deck never stops advancing, it just refuses to let anything leave. Under the hood it is close kin to a scroll-linked animation and it pairs naturally with scroll snap, which lands each card squarely rather than mid-deal.

Two costs are worth stating. The pattern eats vertical room, since every stuck card is viewport the next one does not get, and by the fourth or fifth card the reader is looking at a stack of strips and a sliver of content. And it is content-hostile if the sections are long: a card taller than the viewport scrolls internally before it sticks, which reads as the page having two scrollbars in sequence. It works best with a small, fixed number of short sections that genuinely belong in a sequence, and badly as a general layout for a page whose length nobody controls.