Deck Swiper

CardsVanilla JS · zero dependenciesone drag distance drives everything

drag the top card

-- fps

prefers-reduced-motion detected — the deck is shown still

X-ray · layers

Tiltthe card leans the way you pull it

Stackthe cards behind peek out and rise

Flingpast the threshold it flies off (off = always returns)

Parameters

Threshold90 px

Tilt at edge16°

Stack offset14 px

Return spring0.18

your version · updates as you tinker

How this effect works

The whole interaction hangs on one number: how far you've dragged sideways. That single distance drives everything you see. The card moves by it, of course — but it also rotates in proportion to it (angle = dx / halfWidth × TILT), and the badge that says LIKE or NOPE fades in on the same ratio. Nothing is animated separately; turn tilt off and you'll see the card slide flat, which is exactly how cheap it looks without that one extra line.

Let go and there are only two outcomes. Past THRESHOLD the card keeps the direction it was already going and flies off screen; under it, a spring pulls it home (x += (0 - x) * SPRING). The stack behind isn't a second animation either — each card sits a little lower and a little smaller by its depth, so when the top one leaves, every card simply moves up one step and the deck appears to advance.

Production notes: respects prefers-reduced-motion (still deck, no auto-demo) · pointer events, so mouse and touch share one code path · touch-action: none on the card stops the page scrolling under your thumb · cards are recycled to the back, so the deck never runs out · the copied snippet is self-contained HTML + CSS + JS.