Audio-Reactive Visualizer

Overview

• 🎧 Audio-Reactive Visualizer built using Three.js and Spotify API.

• Converts music data into mesmerizing 3D visuals.

• Ideal for:

  • 🎵 Music websites
  • 🧠 Creative coding projects
  • 🎤 DJs and live visuals
  
  

---

Key Features

🎶 Real-Time Audio Syncing

• Integrates with Spotify API for accurate track metadata.
• Syncs with the beat, tempo, and frequency data.
• Uses web-audio-beat-detector for peak detection in any audio source.

🌀 Interactive 3D Visuals with Three.js

• Built on Three.js for WebGL-powered rendering.
• Includes waveforms, frequency bars, and dynamic particle systems.
• Camera and object animations react to real-time music data.

🔁 Smooth Transitions with GSAP

• Visual elements animated using GSAP (GreenSock).
• Transition effects on beat drops and segment changes.
• Combined with procedural shaders for natural flow.

🌐 WebGL Noise for Visual Complexity

• Procedural 3D noise shaders add organic textures and effects.
• Supports distortion, ripple, and pulse effects driven by audio.

---

Technology Stack

---

Installation

1. Clone the Repository:

   Copy

   git clone https://github.com/TheODDYSEY/Interactive-Particles-Music-Visualizer.git

2. Install Dependencies:

   Copy

   npm install

3. Run the App:

   Copy

   npm run dev

4. Build for Production:

   Copy

   npm run build

How to Use

• Launch the dev server and visit http://localhost:8080
• The visualization will respond in real time to audio tracks and rhythm
• Customize shaders, particle systems, and camera dynamics

🔧 Tech Stack

• Three.js – WebGL rendering
• Spotify API – Music/audio data (tempo, segments, etc.)
• GSAP – Smooth animations
• WebGL Noise – Procedural visuals
• web-audio-beat-detector – Real-time beat detection

📦 Credits

• ARKx / Coala Music – Design inspiration
• Three.js Community – 3D web tooling & support
• Spotify Dev Docs – Music data integration

---