Showcase 16 · Three-body problem
Attraction
A page straight from our toolkit: headline, copy, colour blocks, neatly on the grid. Three wandering attractors pull at it. Whatever is pulled harder than it is held comes loose – first letters tremble, then surfaces tear open and everything streams around the three bodies. One press brings every piece back to its place.
The live demo needs JavaScript. The explanation below is readable without it.
- Layout
- –
- Loose
- –
- Pieces
- –
- Frames/s
- –
How it works
The three attractors are three bodies of equal mass that attract each other according to Newton. They start on the figure-eight orbit, one of the few stable solutions of the three-body problem, but slightly disturbed – which is why their path soon turns chaotic. You can grab and throw them. Every letter and every tile of the colour blocks is a particle of its own with a fixed place in the layout and a holding force: heavy pieces hold more, and every hold slowly tires while the pull is on. Once the pull exceeds the hold, the piece comes loose.
Loose pieces follow the gravity of the three bodies plus a small sideways share; that turns plain falling into streams. “Back to the grid” switches the pull off and sends every piece home on a critically damped spring, in reading order. The grid itself never moves, and navigation and controls stay outside the effect. It is drawn with Canvas 2D, without WebGL; fonts and colours come from the design tokens.