Shapes that keep time: rhythm grids from one sine wave

The motion identities I keep going back to: Studio Dumbar's DEMO festival running on the screens of Amsterdam Central, their North Sea Jazz posters, half the loops on 128kb.eu. All of them run on the same quiet trick. One wave, and everything in the frame reads it a little late.

The whole recipe fits on a sticky note: size = sin(t − d). t is the clock. d is how far a shape sits from some origin. Every dot runs the same sine wave; distance delays it. The delay is the rhythm: one beat, staggered entries, a canon sung by dots.

Fig. 01 A sine curve sampled at twelve points, and under it a row of dots sized by the same samples.

Loop no. 01 is the trick played straight. A 13×13 grid, origin pushed off-centre so the wave arrives at an angle instead of ripping outward from the middle like a sonar ping. I clamped the clock to 10 fps and the dots to six fixed sizes. Smooth 60 fps sine motion is what every tool spits out by default; stepped, it reads more like a flipbook someone is cranking by hand.

Fig. 02 A 13×13 dot grid; sizes follow one sine wave radiating from an off-centre origin.

No. 02 is the same wave pointed at a different property. Nothing changes size. The wave turns things instead. Each bar rotates towards the beat and the angles snap to 15° steps, so the field sits somewhere between weaving and a drawer of compass needles.

Fig. 03 A grid of short black bars turning with the same wave; angles snap to 15-degree steps.

Type took two tries. First I scaled the letters' dots with the wave, same as loop one, and the word dissolved. At every trough half of RYTMI thinned into dust, and a wordmark you can't read twice a second is not a wordmark. So the letters stay rigid and the wave moves them instead: each one bobs a beat after its neighbour, like type set on a music staff. Third property, same wave: position.

Fig. 04 The word RYTMI in dotted letters; each letter bobs one beat after its neighbour.

Everything runs from seed 47, so every render lands on exactly these frames. That's the part I'd hand to a client: not a video file, a recipe. Nine frames, numbered, parameters in the margin. Rerun it in any size, any medium, and it's still the same identity.

Fig. 05 Nine numbered frames of the dot-grid loop between 0 and 3.6 seconds.

This grammar is old. Casa da Música shipped a logo generator in 2007; Tim Rodenbröker has been teaching the wave-and-grid version for years; DEMO turned it into a festival. What keeps pulling me back is how little it costs: the loops here are a ~300-line TypeScript file drawing on a headless canvas, set in PP Neue Montreal like the rest of this site. The hero video is 154 kilobytes. The GIFs are smaller than a phone photo. Rhythm is cheap. You just have to let every shape be slightly late.