MIDI-Controlled Wordmark Rig
A live 3D wordmark rig that maps every visual parameter — orbit, tilt, twist, scatter, depth, wave, tempo — to physical MIDI knobs and faders, turning brand typography into an instrument you can perform.
Every variable is just a number. That’s the insight behind this project — take a brand wordmark, decompose it into controllable parameters, and map every one of those parameters to a physical MIDI controller. The result is a live 3D rig for the Instrument wordmark where orbit, tilt, twist, scatter, depth, wave, and tempo all respond to knobs and faders in real time.
How it works
The wordmark SVG is pulled directly from the Instrument website and converted into a Three.js scene where the geometry can be manipulated across multiple axes. On the surface it looks like a static logo — but underneath, it’s wired up to a full parameter map. Eight knobs handle the spatial controls (orbit, tilt, twist, scatter) and the animation controls (depth, wave, tempo, zoom). Four buttons toggle discrete modes: wire frame rendering that triangulates the SVG mesh into raw geometry, palette cycling, spin, and a burst mode that explodes the letterforms outward. The whole thing connects over WebMIDI API to an itech PBF4 controller, with a software fallback UI so anyone can play with it in the browser without hardware.
The build
The wire mode is the detail I keep coming back to — it’s directly inspired by how Paul Reardon talked about converting SVG data into triangle meshes. Seeing those wireframe triangles render across the letterforms makes the underlying geometry visible in a way that feels genuinely beautiful. The scatter knob is the other standout: it displaces individual mesh vertices outward, so at low values you get a subtle texture and at high values the wordmark dissolves into a point cloud.
Why it matters
This is a proof of concept for something with real implications in brand and motion design. When a wordmark lives as a parameterized rig rather than a static file, it becomes performable. Live event visuals — a DJ or presenter controls brand typography in real time with hardware they already own. Generative brand systems — instead of a single approved lockup, you define the parameter space and let context or interaction drive the output. Design tooling — the same MIDI-to-variable mapping could hook into any design system token, not just typography. The hardware controller is just one input; the underlying idea is that any controllable number is fair game.
- Role
- Creative Technologist
- Tools
- WebMIDI API Three.js SVG JavaScript Netlify