Card Spread started as a question: what if a stack of images could fan out the way a hand of cards does, without reaching for a library to do it.

The idea

Most scroll-triggered card reveals lean on a physics engine or a UI framework's built-in gesture handling. We wanted something lighter. Five images sit stacked at rest, and as the page scrolls, each one rotates and slides outward along its own arc, settling into a fan.

How it works

The whole thing runs on vanilla JavaScript and CSS transforms. Scroll position maps to a single progress value between 0 and 1, and every card interpolates its own rotation, translation, and scale off that one number. No animation library, no physics simulation, just interpolated math tied to scroll.

Because it's just transforms, it's cheap to run and easy to retune. Changing how far a card travels, how much it rotates, or how the fan is spaced is a matter of adjusting a few values, not rewriting the interaction.

View the live experiment