← All projects

Synesthesia

2024 – Present

Live piano, turned into moving light in real time — and kept perfectly in sync across every screen in the room.

ReactNext.jsRxJSWebSocketThree.jsWebGLWeb MIDITone.js

When a pianist plays, every note carries pitch, weight, and timing all at once. Synesthesia listens to all of it and paints it back as light — in real time, the instant the key is pressed.

It's the project where I get to be three things at once: the engineer who makes it run smoothly, the designer who decides what "loud" or "busy" should look like, and the artist who turns a single performance into something you can frame and hang on a wall.

What it is

Synesthesia is a real-time music visualizer. Connect a piano, start playing, and a living scene responds to the music as it happens — brighter and bolder when you play hard, calmer when you ease off, denser when the notes come fast. It's less a video and more an instrument: the performance is the visual.

What makes it special

The hard, interesting problem is doing this across many screens at once without them drifting apart. For a live performance you might have a wall of displays, and the last thing you want is each one interpreting the music slightly differently.

So Synesthesia listens in one place — a single "brain" does all the work of understanding the music — and then sends the same result to every screen at the same moment. One performance, many displays, all moving in lockstep. Add a tenth screen and nothing slows down, because the listening only happens once.

The visuals

Behind it is a library of 37 distinct visual pieces — blooming flowers, drifting clouds and fog, a sun, a moon, falling water, particle bursts — each one reacting to a different quality of the music. I illustrate them in design software and then bring them to life so they respond to what's being played. They can be mixed, layered, and arranged into different scenes, so the same performance can look completely different depending on how the stage is set.

Keeping it smooth

The detail I'm proudest of is invisible when it's working: it stays fluid. Animation lives and dies on smoothness — the moment it stutters, the magic is gone.

When a passage gets especially intense and there's simply too much to draw, the system doesn't freeze or lurch. It quietly steps back the least important motion first — a bit of background decoration — to protect the movement that actually carries the music. It's the same instinct a good live mix has: when things get loud, you protect what matters most. The result is something that feels effortless even when, under the hood, it's working very hard.

Beyond the screen

It doesn't stop at live performance. Working with a pianist, I've turned individual performances into poster-sized prints — a single piece of music captured as one still image, proofed and printed for the wall. That full journey — from a key being pressed, to light moving across a room, to a finished print — is the whole point of Synesthesia.