Skip to main content

WavAnimator

Live · Three.js · Web Audio API · Vite · TypeScript · Updated 2026-07-08

Real-time 3D audio visualization built for live performance — a browser-based visual instrument I use in my own sets and the kind of system I build for collaborators. Active R&D, desktop-only, evolving.

WavAnimator is a browser-based visual instrument: real-time 3D graphics driven directly by live audio analysis. It exists because the VJ tooling I used in live sets kept forcing a choice between canned loops and heavyweight media-server rigs — I wanted an instrument that listens to the room and renders responsively, running in a browser tab with nothing to install.

The audio pipeline runs on the Web Audio API. An AnalyserNode provides FFT frequency bins and time-domain samples per animation frame; attack/release smoothing shapes those raw values into stable control signals so the visuals react musically instead of flickering with every transient. Those signals map onto Three.js scene parameters — geometry deformation, camera movement, material and color response — through an explicit mapping layer that keeps audio features and visual parameters decoupled and swappable.

The rendering side is plain Three.js with a strict real-time budget: every effect has to hold frame rate while the analyser, mapping layer, and renderer all share the main thread. That constraint drives most architecture decisions — object reuse instead of allocation in the render loop, capped geometry complexity, and desktop-only scope for now, since mobile GPU and audio-latency behavior is not yet reliable enough for performance use.

The instrument is live at wavanimator.com and in active R&D: I play it in my own sets, which keeps a tight feedback loop between what the code does and what a performer actually needs mid-show. It is the reference case for the kind of system I build for collaborators — performance software where design decisions and engineering decisions are the same decisions.

Visit WavAnimator