← All effects

Physics Drag Cards

CardsVanilla JS · zero dependencies~30 lines of physics
throw a card
-- fps
prefers-reduced-motion detected — the cards are laid out still

X-ray · layers

let go and it keeps going (off = stops dead)
cards shove each other (off = they pass through)
a card tilts the way it is travelling

Parameters

Friction0.96
Bounce0.70
Cards5
Spin14°
your version · updates as you tinker

How this effect works

There is no physics engine here — just a position and a velocity per card, updated once a frame. Dragging doesn't set the velocity directly; the card follows your finger, and the velocity is simply how far it moved since the last frame. That's why a throw feels right: you're not configuring a force, you're measuring the movement you already made. Let go and the only thing that happens is v *= FRICTION every frame until it dies. Turn inertia off and the velocity is thrown away on release — the card stops dead, and you can feel instantly how much of "weight" is just that one multiply.

Collision is the other half, and it's cheaper than it looks: for each pair, measure the overlap on both axes, push them apart along the smaller one, and swap their speeds on that axis (scaled by BOUNCE). Equal masses, so a straight swap is the correct answer, not an approximation. The walls do the same thing against an immovable partner. Spin adds nothing to the simulation — it just tilts each card by its own horizontal speed, which is why turning it off changes the feel but never the path.

Production notes: respects prefers-reduced-motion (static layout, no motion) · O(n²) pair checks, which is free at this card count · velocity is clamped so a violent flick can't tunnel a card through a wall · touch-action: none keeps the page from scrolling under a drag · the copied snippet is self-contained HTML + CSS + JS.