Music Reactive Sphere

Web · React · Three.js

Music Reactive Sphere
GitHub repository / Demos

Interactive web experience developed with React and Three.js to explore real-time audio visualization and procedural graphics. The project features a dual-sphere system driven by audio frequency analysis: - Inner sphere reacts to high frequencies and rhythm changes - Dynamic gradient transitions based on audio intensity - Radius deformation synchronized with musical peaks - Outer particle sphere responds primarily to low frequencies - Bass and treble separation for coherent visual feedback - Timeline-driven events for drops and musical transitions - Cinematic camera movements synchronized with key moments - Free camera navigation around the visualization - Audio playback controls (play, pause, seek, skip) - Real-time synchronization between audio and visual systems - Post-processing effects including bloom and dynamic lighting The project focuses on creating a visually coherent relationship between sound and motion, transforming music into an immersive interactive 3D experience.

Tools used

  • React
  • Three.js
  • TypeScript
  • Vite
  • Web Audio API