03Real-time graphics
Visualizzer
Solo build · 2026
Real-time audio-reactive graphics from live sound
12+audio-reactive styles
Turns live audio into reactive graphics: a 44.1 kHz ingestion pipeline drives 12+ styles on a 2-D canvas, held at a steady 60 FPS.
A high-quality (44.1 kHz) audio-ingestion pipeline drives 12+ unique audio-reactive styles rendered on a 2-D canvas. A quality controller scales pixel density on the fly to hold a consistent 60 FPS at 1080p even under extreme compute load. Built on the Web Audio API with GLSL shaders and Three.js / WebGL2. (The windows around this site are small visualizers built the same way.)
Stack
- Web Audio API
- GLSL
- Three.js
- WebGL2
- TypeScript
03
How it's built
SPECIFICATION
- Ingestion
- 44.1 kHz audio pipeline
- Styles
- 12+ audio-reactive visualizers
- Canvas
- 2-D canvas rendering
- Perf
- adaptive pixel density, 60 FPS @ 1080p
MY ROLE
- 01Built the 44.1 kHz audio-ingestion and analysis pipeline.
- 02Designed 12+ audio-reactive visual styles.
- 03Wrote a quality controller scaling pixel density to hold 60 FPS at 1080p.