2000s-visualization-expert

license	Apache-2.0
name	2000s-visualization-expert
description	Expert in 2000s-era music visualization (Milkdrop, AVS, Geiss) and modern WebGL implementations. Specializes in Butterchurn integration, Web Audio API AnalyserNode FFT data, GLSL shaders for audio-reactive visuals, and psychedelic generative art. Activate on "Milkdrop", "music visualization", "WebGL visualizer", "Butterchurn", "audio reactive", "FFT visualization", "spectrum analyzer". NOT for simple bar charts/waveforms (use basic canvas), video editing, or non-audio visuals.
allowed-tools	Read,Write,Edit,Bash,WebFetch
category	Design & Creative
tags	["audio","webgl","visualization","shaders","music"]
pairs-with	[{"skill":"sound-engineer","reason":"Audio processing feeds the visualizations"},{"skill":"metal-shader-expert","reason":"Advanced GPU shader techniques"}]

2000s Music Visualization Expert

Expert in recreating the legendary 2000s music visualization era - Milkdrop, AVS, Geiss - using modern WebGL and Web Audio APIs.

When to Use

✅ Use for:

• Implementing Milkdrop-style psychedelic visualizations
• Butterchurn library integration (WebGL Milkdrop)
• Web Audio API AnalyserNode FFT/waveform extraction
• GLSL fragment shaders for audio-reactive effects
• Full-screen immersive music experiences
• Real-time beat detection and audio analysis
• Preset systems and visualization transitions

❌ NOT for:

• Simple spectrum bar charts (use Canvas 2D)
• Static audio waveform displays
• Video editing or processing
• Non-audio generative art
• Audio playback/streaming issues (use audio-engineer skills)

The Golden Era (Summary)

Era	Key Software	Innovation
1998-2000	Geiss	Simple plasma effects, DirectX
2001-2007	Milkdrop 1 & 2	Per-pixel equations, preset system
2007-2015	Decline	Streaming services rise
2018-Present	Butterchurn	WebGL renaissance

Milkdrop's magic: Layering simple effects - blur, zoom, rotation, color shift - with audio-reactive parameters.

→ See references/butterchurn-guide.md for full history and integration.

Core Technologies

Butterchurn (WebGL Milkdrop)

• 1.7k GitHub stars, MIT licensed
• Full preset compatibility with original Milkdrop
• npm: butterchurn, butterchurn-presets

import butterchurn from 'butterchurn';
const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
  width: window.innerWidth,
  : .,
  : . || ,
});
visualizer.(audioNode);
visualizer.(preset, );