A React app that creates a fractal radial visualization of audio using WebGL shaders.
- Real-time audio analysis using Web Audio API
- Kaleidoscopic fractal pattern that responds to:
- Bass - Controls pattern complexity and pulse
- Mid frequencies - Affects color saturation and scale
- Treble - Drives sparkle effects and hue shifts
- Overall amplitude - Controls brightness and rotation speed
-
Install dependencies:
npm install
-
Add your audio file:
- Place an MP3 file named
track.mp3in thepublic/folder - Or update the
AUDIO_SRCconstant insrc/App.tsxto point to your audio file
- Place an MP3 file named
-
Start the development server:
npm run dev
-
Open your browser and click the play button to start the visualization
- React + TypeScript
- Vite
- Three.js + React Three Fiber
- Custom GLSL shaders
- Web Audio API
src/
├── App.tsx # Main app with audio element + controls
├── components/
│ └── Visualizer.tsx # Three.js canvas with shader material
├── hooks/
│ └── useAudioAnalyzer.ts # Web Audio API hook for frequency analysis
└── shaders/
├── fractal.vert.glsl # Vertex shader
└── fractal.frag.glsl # Fragment shader with fractal pattern
- Audio playback must be triggered by user interaction due to browser autoplay policies
- The visualizer works best with music that has distinct bass, mid, and treble frequencies