synthJS

synthJS is a browser-based synthesizer where the sound and the visuals come from the same source of truth — every oscillator, filter, and envelope you hear is also driving a GLSL shader in real time.

one graph, two outputs

Most audio-reactive visuals work backwards: analyze already-rendered audio (usually via an FFT) and map the result onto some unrelated visual parameter. synthJS builds the shader parameters directly from the same Web Audio node graph that generates the sound, so a change to a filter's cutoff or an envelope's decay updates the waveform and the geometry in the same frame, with no analysis step and no drift between what you hear and what you see.

keeping it at 60fps

Web Audio's parameter automation and requestAnimationFrame don't share a clock, so the trickiest part was building a small scheduler that samples the audio graph's current values once per visual frame and smooths them, instead of naively reading AudioParam values straight into the shader uniform, which produced visible stutter on anything faster than a slow LFO.

Three.js handles the geometry; the shader is where the sound actually lives.