Wavefield is a browser-based cymatic audio visualizer. It listens to music, extracts frequency features, and turns them into Chladni-style modal patterns rendered as an interactive GPU field with Three.js.
Use it as a visual instrument: load a bundled sample track or your own audio, scrub the waveform, tune the modal field, switch between saved templates, and shape the final output with post-processing effects.
- Audio-driven cymatic fields with frequency analysis and modal interpolation
- Screen and sphere projections with interactive Three.js rendering
- Bundled sample tracks plus local audio upload
- Waveform playback, scrubbing, and live diagnostics
- Template presets for quickly changing the visual language
- Post-processing controls for bloom, fisheye, pixelation, contouring, and trails
The template names below use the corresponding showcase/ image filename.
| Template | Preview |
|---|---|
default |
 |
microsoft-excel |
 |
infection |
 |
alien |
 |
knicks |
 |
lightning |
 |
grid |
 |
matrix |
 |
diablo |
 |
green-flame |
 |
black-on-red |
 |
npm install
npm run devBuild and preview the production bundle:
npm run build
npm run previewWavefield loads templates from src/templates/. In development, the app can
save, resave, and delete templates through the local Vite middleware.
Sample MP3 files live in src/fixtures/audio/. They are imported through Vite
so production builds receive fingerprinted asset URLs instead of hardcoded file
paths.
Demo Audio thanks to Moby at mobygratis.com
npm run build
npm run test:analysisMIT