Karan Chandekar | Software Engineer

The Challenge

Building a real-time audio visualizer that synchronizes 3D graphics, particle systems, and shader effects with music in the browser at 60fps.

The Solution

Used Tone.js Web Audio API for real-time FFT analysis, React Three Fiber for 3D rendering, custom GLSL shaders for visual effects, and GSAP for smooth transitions between visualizer modes.

// Real-time FFT audio analysis
const analyser = new Tone.Analyser('fft', 256);
player.connect(analyser);

useFrame(() => {
  const spectrum = analyser.getValue();
  bars.forEach((bar, i) => {
    const amplitude = (spectrum[i] + 140) / 140;
    bar.scale.y = lerp(bar.scale.y, amplitude * 5, 0.1);
  });
});