Play · experiment

Card Carousel

A 3D card deck built as one standalone React component. Every input — the wheel, a drag, the arrow keys — moves a single position value, and the cards read their transform from it. That is the whole idea: one number, three ways to push it, so the three never fight each other or need to be reconciled.

Driving it

Scroll over the deck, drag it, or focus it and use the left and right arrow keys. A flick carries momentum and settles on a card rather than stopping dead, and the counter under the deck tracks which one is in front.

Notes

Releasing a drag hands its velocity to an eased animation instead of snapping, so a fast flick and a slow nudge end the same way. The component honours prefers-reduced-motion: with it set, the easing and the depth animation drop out and the deck simply changes card.