Offbeat

01 — The idea

Sound brings order.

I listen to a lot of music, and what I like best is looking for it: digging through crates of vinyl, flipping sleeves, dropping the needle on a record I don’t know. Offbeat came from wanting that on the web. It started in 2025 as Soundwave, a three.js demo; I rebuilt it from scratch in September 2026.

It follows a record shop: you dig a crate by genre, drop the needle, and watch the sound. In silence, halftone dots drift on the ink; when the record plays, they settle into a landscape and take the colours of its energy. They are the same dots as on this site; over there, the music puts them in order.

02 — How it works

A spectrum, lit like a landscape.

The browser can listen: on every frame, its audio analyser gives the energy of the sound, frequency by frequency. I group it into 96 bands, bass on the left and treble on the right, spaced the way the ear hears them. Every 160 ms the line steps back: the landscape shows the last four seconds of the track, the newest in front.

The hard part was legibility. I first tried a lit surface, the obvious choice: all you could see was a shapeless heap. What worked was treating each line as an opaque veil, lit from above. I draw them back to front; each hides the one behind, and every crest reads on its own. A shader then puts one halftone dot per cell: its size follows the light, its colour the energy.

03 — The sleeve

Sleeves nobody drew.

One seed per record

In a record shop, you pick by the sleeve first. In Offbeat, no sleeve is an image: each one is generated procedurally from the record’s metadata. Its Audius id, hashed, seeds a pseudo-random generator that places three or four poles around the centre and gives each an energy. The track’s mood, set by the artist on Audius, fixes two settings: the average energy, which places the palette from peach for a calm record to violet for an intense one, and a tension. For each of the 56 × 56 dots, the colour comes from an average of the poles weighted by distance, over a field that noise warps more as the tension rises. Nothing is stored: same seed, same sleeve, on every visit.

04 — The print

Every record leaves a print.

A vinyl record is something you hold; a stream leaves nothing behind. So Offbeat turns a listen into a print, the way you get a photo printed. Once the track is decoded, it folds the whole of it into 48 crests, the beginning at the top, on a 4:5 poster dated the day you heard it. You choose ink or paper (a paper with some texture, a fine grain and a few fibres), then keep it or share it.