Shapes that keep time: rhythm grids from one sine wave

back to works
Published on Tags: animation, branding, motion design, personal project, tutorial

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.

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.

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.

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.

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.

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.