🎯

2000s-visualization-expert

🎯Skill

from erichowens/some_claude_skills

VibeIndex|
What it does

2000s-visualization-expert skill from erichowens/some_claude_skills

πŸ“¦

Part of

erichowens/some_claude_skills(148 items)

2000s-visualization-expert

Installation

Add MarketplaceAdd marketplace to Claude Code
/plugin marketplace add erichowens/some_claude_skills
Install PluginInstall plugin from marketplace
/plugin install adhd-design-expert@some-claude-skills
Install PluginInstall plugin from marketplace
/plugin install some-claude-skills@some-claude-skills
git cloneClone repository
git clone https://github.com/erichowens/some_claude_skills.git
Claude Desktop ConfigurationAdd this to your claude_desktop_config.json
{ "mcpServers": { "prompt-learning": { "command": "npx", "args...
πŸ“– Extracted from docs: erichowens/some_claude_skills
11Installs
21
-
Last UpdatedJan 23, 2026

Skill Details

SKILL.md

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.

Overview

# 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

```typescript

import butterchurn from 'butterchurn';

const visualizer = butterchurn.createVisualizer(audioContext, canvas, {

width: window.innerWidth,

height: window.innerHeight,

pixelRatio: window.devicePixelRatio || 1,

});

visualizer.connectAudio(audioNode);

visualizer.loadPreset(preset, 2.0); // 2s blend

```

Web Audio API FFT

```typescript

const analyser = audioContext.createAnalyser();

analyser.fftSize = 2048;

analyser.smoothingTimeConstant = 0.8;

const frequencyData = new Uint8Array(analyser.frequencyBinCount);

analyser.getByteFrequencyData(frequencyData);

```

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:

```glsl

uniform float u_bass;

float glow = smoothstep(0.5 - u_bass * 0.3, 0.0, dist);

```

β†’ 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. Linear Frequency Display

What it looks like: Bass dominates, treble invisible

Why it's wrong: FFT bins are linear; first 100 bins might be 0-2kHz

Fix: Use logarithmic bin mapping (code in references)

3. No Smoothing

What it looks like: Jittery, seizure-inducing visuals

Why it's wrong: Raw FFT data is noisy frame-to-frame

Fix: analyserNode.smoothingTimeConstant = 0.7

4. requestAnimationFrame Without Cleanup

What it looks like: Memory leaks, multiple render loops

Fix: Store animation ID, call cancelAnimationFrame on unmount

5. Hardcoded Canvas Size

What it looks like: Blurry on retina, wrong aspect ratio

Fix: Multiply by devicePixelRatio, handle resize events

6. Blocking Main Thread

What it looks like: Choppy audio, dropped frames

Why it's wrong: Heavy shader compilation on UI thread

Fix: Compile shaders during loading, not during playback

Preset Recommendations

Psychedelic/Trippy:

  • Flexi, martin + geiss - dedicated to the sherwin maxawow
  • Rovastar - Fractopia

Smooth/Chill:

  • Flexi - predator-prey-spirals
  • Geiss - Cosmic Strings 2

High Energy:

  • Flexi + Martin - disconnected
  • shifter - tumbling cubes

Integration Checklist

  • [ ] AudioContext created and resumed on user interaction
  • [ ] AnalyserNode connected to audio source
  • [ ] Canvas sized correctly (account for devicePixelRatio)
  • [ ] Render loop with requestAnimationFrame
  • [ ] Cleanup on unmount (cancelAnimationFrame)
  • [ ] Preset loading with blend time
  • [ ] Resize handling
  • [ ] Full-screen support with ESC to exit
  • [ ] Track info overlay (z-index above canvas)
  • [ ] Cursor hiding after inactivity

Performance Tips

  1. Lower texture ratio for older GPUs: textureRatio: 0.5
  2. Reduce fftSize if not needed: 512 or 1024 vs 2048
  3. Use will-change: transform on canvas
  4. Avoid DOM updates during render loop
  5. Profile with Chrome DevTools GPU timeline

References

β†’ references/butterchurn-guide.md - Complete Butterchurn integration

β†’ references/web-audio-fft.md - FFT extraction and frequency analysis

β†’ references/glsl-shaders.md - Audio-reactive shader patterns

---

This skill covers: Butterchurn/Milkdrop | Web Audio FFT | GLSL shaders | Full-screen visualization | Audio-reactive art