Physics Drag Cards
X-ray · layers
Parameters
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.
touch-action: none keeps the page from scrolling under a drag · the copied snippet is self-contained HTML + CSS + JS.