Agent skill · design visual · erichowens
2000s-visualization-expert
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
Why this skill is useful
Provides specific GLSL shader patterns and Web Audio API integration techniques that the AI wouldn't reliably generate on its own.
What it needs
Requires butterchurn installed locally. About 3k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
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 Web Audio API FFT Critical: FFT bins are linear but hearing is logarithmic! Use logarithmic mapping. → See references/web-audio-fft.md for frequency band extraction. GLSL Shaders Pass audio data as 1D texture, use uniforms for bass/mid/treble: → See references/glsl-shaders.md for complete patterns. Anti-Patterns to Avoid 1. Ignoring AudioContext State What it looks like: Visualization silently fails Why it's wrong: AudioContext starts suspended, needs user interaction Fix: Resume on click: await audioContext.resume() 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/2000s-visualization-expert