2000s-visualization-expert

Audio-responsive visualizations use Web Audio FFT data to analyze frequency content in real time, then map that analysis to GLSL shader effects rendered on WebGL canvases. This Skill integrates Butterchurn presets with FFT extraction and shader pipelines to produce full-screen, beat-reactive visuals synchronized to music playback.

Yes. Butterchurn brings Milkdrop preset compatibility to WebGL environments. This Skill wraps Butterchurn integration, GLSL shader rendering, and Web Audio APIs to deploy Milkdrop-style visuals on modern web platforms with cross-device support and devicePixelRatio-aware canvas scaling.

Real-time audio-reactive shader rendering requires extracting FFT data from Web Audio, mapping frequency bands to shader uniforms, and rendering via WebGL with optimized canvas sizing. This Skill handles the full pipeline: Butterchurn presets, FFT analysis, beat detection, and performance tuning for responsive full-screen experiences.

WebGL canvases must account for devicePixelRatio to render crisply on high-DPI displays. This Skill includes devicePixelRatio-aware canvas setup and performance optimizations to ensure Milkdrop-style visuals maintain quality and frame rate across desktop, tablet, and mobile devices.

Web Audio FFT analysis extracts frequency bins from live or buffered audio; mapping those bins to shader parameters creates frequency-reactive visuals. This Skill automates FFT extraction, beat detection, and parameter mapping to GLSL shaders for synchronized audio-visual output.