Tumble

Interface elements that weigh something

The most common motion on the web is a property animation: something changes a number, an easing curve decides how long the change takes, and the element moves because a clock said so. That is a good tool and it is the wrong tool for anything the reader can interrupt. A dragged card that snaps to a grid under your finger is not a card with a transition on it; it is a card being carried, and the difference shows up the moment you grab it.

So this page runs a real integrator. Each body carries position, velocity, angle, angular velocity, mass and a radius, and is stepped by semi-implicit Euler at a fixed 1/120s substep. Contacts are resolved as impulses along the line of centres, with tangential friction, restitution, and a positional correction pass so overlaps never accumulate. Neighbour search is a uniform spatial hash rebuilt each step, which is what makes a few hundred bodies cost something like linear work instead of quadratic work.

The four fields in the dock are four different force laws, not four colour themes: a lattice of anchors that pull and repel in a grid, a central well with inverse-square falloff, a uniform magnetic drift that bends every trajectory, and free-fall with walls. They are not decoration over one simulation — the readouts in the dock report the energy actually in the system, and pressing Drop removes the anchors so you can watch the same bodies convert a spring field into ballistic motion.

Technique

Hand-written rigid-body integrator. Semi-implicit Euler at a fixed 1/120s substep, impulse collision resolution with restitution and tangential friction, positional correction, and a uniform spatial hash rebuilt per step. Canvas2D. No physics library.

What it does

Four force fields change how the same bodies move: Lattice is a grid of repelling anchors, Well is an inverse-square central attractor, Drift is a magnetic field that curves every trajectory, and Fall turns the anchors off and lets gravity and the walls do the work. Tiles are draggable, elastic on contact, and readable at any rotation.

Live demo

The frame above is the demo, and the dock is inside the same viewport at every width — grab a tile and you can watch the impulse travel across the pile in the same frame you feel it.

Good for

Product configurators, card systems, playful onboarding, tool palettes where the reader should feel the weight of what they are holding, and any interaction a visitor might try to interrupt.

Combines with

A real state change at the end of the throw — the card you threw is the card that was selected. Physics is only worth it when the outcome matters.

Complexity

About 300 lines of integrator, one 2D context, no dependency. Everything is in this one file; there is nothing to install and nothing to fetch.

Performance

Cost is dominated by the contact pass, which is sublinear in body count thanks to the hash. The body count is chosen from the art frame's area at load and is printed in the header, so the number you see is the number being integrated. Substeps drop from 2 to 1 if a frame runs long.