Lush Audio Visualizer

An adaptive, interactive audio visualizer with intelligent music analysis that creates unique visual experiences for different songs and genres.

🚀 Quick Start

Running the Demo (sunday.mp3)

python3 -m http.server 8000
# Open http://localhost:8000

Building Your Own Visualizer

node build.js your-music.mp3 "Your Title"
cd builds/your-title-xxxxxxxx
python3 -m http.server 8000
# Open http://localhost:8000

Each build is unique with random variations in title treatment, colors, and effects!

🎨 Build System

Generate custom visualizers for any MP3 file:

node build.js <mp3-file> <title> [output-dir]

What makes each build unique:

6 different title treatments (letter-by-letter, glitch, typewriter, etc.)
5 background color variations
4 trail styles (long, short, heavy, none)
5 memory flashback timing patterns
Social media preview image auto-generated

Examples:

node build.js ambient.mp3 "Dream State"
node build.js edm-banger.mp3 "PULSE"
node build.js jazz.mp3 "Blue Note"

Each build includes:

Optimized Open Graph & Twitter Card meta tags
Auto-generated preview image (1200x630) with title and play button
Ready to share on social media platforms

See BUILD_SYSTEM.md for complete documentation.

✨ Features

Adaptive Music Analysis

The visualizer learns from your music and adapts in real-time:

Tempo Detection - Detects BPM and adjusts particle physics
- Fast music (EDM): snappy, energetic motion
- Slow music (ambient): smooth, flowing motion
Spectral Analysis - Adapts color palette to music character
- Bass-heavy (hip-hop): purple-red palette
- Bright (pop): cyan-blue-magenta palette
- Balanced (rock): blue-green palette
Onset Detection - Particle bursts on drum hits and transients
Dynamic Range - Adapts zoom range to music dynamics
- High dynamics (classical): huge zoom swings
- Low dynamics (compressed): subtle variations
Density Analysis - Adjusts particle count to music complexity
- Sparse (minimal): 75-100 particles
- Dense (orchestral): 150-225 particles

Interactive Co-Authorship

Create your own visual composition:

Mouse movement → Filter sweep (Y-axis) + Echo/delay (X-axis)
Click → Create dramatic wave ripples with particle bursts
Drag → Paint permanent particles
Right-click → Remove particles (destructive void)
Scroll wheel → Manual zoom control

Auto-Pilot Mode

When you stop interacting, the visualizer continues autonomously:

Activates after 15 seconds of idle time
6 gesture types: smooth movements, circular patterns, drag painting, clicks, zoom cycles, figure-eight motions
Full audio effects included (filter sweeps, echo/delay)
Instantly disables when you move the mouse or interact
Perfect for display/demo mode or ambient visual experiences

Visual Effects

Dramatic click waves with multiple ring cascades
Intelligent blank space filling when zoomed out
Haunting title memory flashbacks
Audio-reactive particle behavior (size, color, motion)
Dynamic connections between particles
Long-lasting mouse trails
Zoom pulses and focus effects

🎵 Music Analysis

The visualizer analyzes the first 30 seconds of music to build a profile:

{
  tempo: 90,              // BPM
  spectralCentroid: 2000, // Hz (brightness)
  warmth: 0.5,            // 0=dark/bass, 1=bright/treble
  dynamicRange: 3.0,      // Crest factor
  density: 0.5            // Spectral complexity
}

Then it adapts:

Particle physics (friction, speed)
Color palettes
Particle counts
Zoom ranges
Amplification levels

Check the browser console to see the detected music profile!

📁 Project Structure

.
├── index.html          # Main visualizer template
├── sunday.mp3          # Demo audio file
├── build.js            # Build system script
├── BUILD_SYSTEM.md     # Build system documentation
├── README.md           # This file
└── builds/             # Generated builds go here
    └── your-title-xxxxx/
        ├── index.html
        ├── your-music.mp3
        └── README.md

🎭 Genre Examples

How different music looks:

EDM/Electronic - Electric cyan/magenta, rapid motion, constant particle bursts
Classical - Rich colors, huge dynamic swings, dramatic zooms
Hip-Hop/Trap - Deep purple-red, heavy weighted particles, bass-driven
Ambient - Smooth flowing motion, long trails, subtle colors
Rock - Balanced blue-green, energetic but controlled
Jazz - Complex particle patterns, varied dynamics

🛠️ Technical Requirements

Node.js - For running the build system
Python 3 - For local web server (or any HTTP server)
Modern Browser - Chrome, Firefox, Safari, Edge (supports Web Audio API)
MP3 Files - Your music!

🌐 Running Options

Option 1: Python HTTP Server (Recommended)

python3 -m http.server 8000
# Open http://localhost:8000

Option 2: Node.js HTTP Server

npx http-server -p 8000
# Open http://localhost:8000

Option 3: VS Code Live Server

Install "Live Server" extension
Right-click index.html → "Open with Live Server"

⚠️ Important: Must use HTTP server - file:// URLs don't work due to CORS restrictions.

🎨 Title Treatments

Each build randomly selects one of 6 creative title treatments:

Letter-by-Letter - Classic sequential reveal
Word Flip - 3D word rotation effect
Glitch Reveal - Digital corruption aesthetic
Wave Cascade - Cascading letter animation
Typewriter - Character-by-character typing
Split Mirror - Center split with mirroring

The title becomes part of the art!

🔧 Customization

Want to modify the visualizer or build system?

Edit build variations:

Open build.js
Modify titleTreatments array for new title styles
Modify visualVariations for new color schemes

Edit template:

Modify index.html
Changes automatically apply to new builds

📝 License

This project uses adaptive music visualization technology with co-authorship principles.

🚀 Future Ideas

Batch processing for multiple MP3s
Config file support (JSON/YAML)
Custom color palette definitions
Integration with music metadata
Mobile device motion controls
Real-time microphone input mode

Built with adaptive music analysis, particle physics, and creative randomization.

Enjoy creating unique visualizations for every song! 🎵✨

chad/sunday