Sound Visualiser
Browser look instrument — live WebGL follows the beat; looks are reloadable JSON; Keep saves a 30s local clip of the canvas plus soundtrack.
- TypeScript
- Vite
- Three.js
- GLSL
- Web Audio API
- Meyda
- GSAP
Case study
In brief
Problem
Most browser visualizers bounce bars to volume and jitter instead of locking to the beat, so the show never feels in sync with the music.
Approach
Built a client-side VJ rig with Meyda spectral analysis, mood and energy tracking, and beat confidence so visuals step in time when the tempo is clear. Three modes cover 3D scenes, webcam feed, and feedback-loop acid trails.
Outcome
Audio, video, and rendering stay on the user's machine—nothing is uploaded or recorded. The live demo runs mic, file, or bundled track sources in the browser.
Look closer
Stage
Proof
Browser look instrument — live WebGL follows the beat; looks are reloadable JSON; Keep saves a 30s local clip of the canvas plus soundtrack.
Proof
Architecture
C4 architecture — Context → Containers → Components (docs/c4/portfolio-map.json)
Architecture
- Person
- Software system
- External system