An audio-reactive 3D particle orb. Point it at your microphone and watch 800 particles respond to the frequency data coming in. Drag to rotate, scroll to zoom, adjust the sliders to make it yours.
Live demo
- Count — number of particles (100–1500)
- Size — particle size
- Sensitivity — how strongly audio affects the shape
- Distortion — amplitude of particle displacement
- Base / Accent — colors at rest and at peak frequency
- Background — scene background color
- Start Microphone — enables audio-reactive mode via the Web Audio API
Without microphone access, the orb breathes on its own in a slow idle animation.
Particles are distributed across a sphere using a Fibonacci lattice. Each frame, frequency data from the Web Audio API is mapped across the particle set — particles near high-frequency bands get displaced outward and shift toward the accent color. The result is a shape that visually tracks the spectral content of whatever sound is coming in.
No build step:
npx serve .Then open http://localhost:3000.
- Three.js r128
- Web Audio API
- No other dependencies
MIT