← All work
Creative tech · Audio

Chromatic Audio Painter

A multi-mode audio visualizer — fractal spectrums, 3D chaos clouds, spectral wash curtains — all reacting to live audio input in real time.

TypeScript Private repo
View example ↗
GHBanner

Chromatic Audio Painter

Real-time Spectral Visualization & 3D Generative Art

Overview

Chromatic Audio Painter is a high-performance web-based audio visualizer that transforms sound into dynamic, 3D generative art. Built with React Three Fiber and Three.js, it uses spectral analysis to drive complex particle systems and post-processing effects in real-time.

Key Features

  • Real-time Microphone Input: Visualize live audio from your surroundings.
  • Local File Upload: Support for MP3 and other audio formats.
  • Multiple Visualization Modes:
  • Radial Burst: Explosive bursts of strokes synchronized with bass and mids.
  • Linear Flow: A waterfall-like spectral analyzer with depth modulation.
  • Chaos Cloud: A 3D noise field reacting to musical energy.
  • Spectral Wash: A shimmering, vertical curtain of light reacting to high-frequency spectral data.
  • Persistent Configuration: Your selected visualization mode is automatically saved to a Neon PostgreSQL database and restored on page refresh.
  • High Performance:
  • Instanced Rendering: Renders thousands of unique "paint strokes" in a single draw call.
  • Web Worker Analysis: Offloads heavy FFT and spectral analysis to a background thread to maintain 60FPS.
  • Modern Aesthetics: Integrated Bloom, Chromatic Aberration, and Grain effects for a premium cinematic feel.

Technical Stack

  • Frontend: React (v19)
  • 3D Engine: Three.js via React Three Fiber
  • Post-Processing: @react-three/postprocessing
  • Styling: Tailwind CSS
  • Performance: Web Workers API for audio processing

Getting Started

Prerequisites

  • Node.js (Latest LTS recommended)
  • pnpm or npm

Installation

  1. Clone the repository
  2. Install dependencies:
    pnpm install
  3. Run the development server:
    pnpm dev
  4. Open your browser to http://localhost:5173

Development Notes

  • The audio processing logic is located in services/audioService.ts.
  • The generative shader-like logic is in components/Visualizer/PaintStrokes.tsx.
  • Audio analysis features (bass, mid, treble, energy) are updated via a useFrame loop reading from a shared ref for zero-latency animation.