3D equalizer
Pure CSSSeven real cuboids bouncing like an audio meter. Walls are squashed with scaleY and each lid rides down by the same amount, so nothing but transforms ever changes.
Every one runs live, with a step-by-step explanation and code you can edit and paste into your own project.
Seven real cuboids bouncing like an audio meter. Walls are squashed with scaleY and each lid rides down by the same amount, so nothing but transforms ever changes.
The classic square loader: half a turn on X, then half a turn on Y, and both again, so the square ends the loop exactly where it began.
Three nested rings, each spinning on a single axis — the rotations compound.
Rungs spin on negative delays; dots counter-rotate so they always face the camera.
JS builds the grid and gives each cell its distance from the centre; CSS turns that into a ripple.
Click any tile: every tile flips, delayed by its distance from the one you clicked.
The classic fold loader laid on a floor in real perspective: each quadrant swings up over one edge, rests, then folds away over the next, a quarter-beat after its neighbour.
Three rings of paired arcs, each tumbling around a different axis while its arcs chase each other around the ring, circling a breathing core.
Eight glowing dots with comet trails circle a core on three tilted orbits, while the whole atom slowly turns. Every dot counter-rotates so it always faces you, yet still passes behind the core.
Eight blocks pop into the air and drop one by one onto an isometric floor until they form a 2×2×2 cube, then the cube comes apart column by column and floats away, and it all starts again.
Five brass balls hang on V-shaped threads from a violet frame with real depth; the outer two swing out and back in turn while the middle three stay still. Each pendulum is one wrapper rotated about the point where its threads are tied, so the ball follows a true arc.
Fifteen pendulums hang from one frame, each a little shorter and faster than the last, so the row drifts through snakes, waves and two crossing lines before it falls back into one. Pendulum k swings 20 + k times in the same 30 seconds, so the whole pattern repeats exactly.
A glossy ball drops onto a small floor tile, squashes flat, stretches as it leaves and climbs back to the top, while its shadow on the tile grows and darkens as it comes down. The fall and the climb are true parabolas, from two cubic-bezier curves that are exactly t² and its mirror.
A loader that solves the Tower of Hanoi: three disks lift, cross and drop in the 7-move legal order from one peg to another. Then the round board turns a third of a turn, so the finished peg stands where the first one did and the loop starts again with no jump.