MusicViz v1.10.1 Open App →
Signal active — all layers ready

MusicViz

A browser-based visualization studio — build layered visuals driven by your audio, export as video. No installs. No backend. No build step.

Web Audio API / WebGL2
Canvas 2D / MediaRecorder
Zero dependencies
About this project

An experiment in agentic AI-assisted development and the outer limits of vanilla JavaScript — built entirely in-browser using native APIs, zero frameworks, and zero build tools. A canvas for experimentation, not a polished product.

Features

08 highlights
01 Audio Engine

Real-time FFT analysis via Web Audio API drives every layer simultaneously. Audio is muxed directly into the exported video.

Core
02 GLSL Shaders

Shadertoy-compatible shaders in the browser. WebGL2, 4 render buffers for multi-pass effects. iChannel0 streams live audio as a 512×1 texture every frame.

Advanced
03 Particle System

Physics-based particles with gravity, wind, turbulence, and force fields. 93+ built-in sprites, custom emitter shapes, trails, and animated sprite sheets.

Advanced
04 MilkDrop Visualizer

1,754 classic presets rendered via Butterchurn (WebGL2). Warp equations and GLSL shaders react to bass, mid, and treble every frame. Auto-cycle with blend transitions.

Advanced
05 Post-Processing FX

37 real-time GLSL effects — blur, distort, color grade, stylize, grain, blend, transform, and artistic modes. Opacity dials in blend strength.

Effect
06 Automation & LFO

Drive any numeric parameter with an LFO (5 waveforms) or a keyframe curve. Automation lanes appear directly in the timeline — drag keyframe dots to adjust.

Advanced
07 Video Export

Real-time recording via captureStream() + MediaRecorder. Exports WebM (VP9) or MP4 (H.264) at 40 Mbps with audio muxed in.

Export
08 Preset System

Save any layer’s visual settings as a named preset and re-apply it to other layers of the same type in one click. Export preset packs to share styles across projects or with other users.

Core
Complete reference
Visualizer Layers
  • Frequency Bars — solid, gradient, hue-rotate; mirror mode
  • Circular Analyzer — bars, dots, lines; inner radius and rotation
  • Waveform — line, filled, mirrored; smoothing and line width
  • Beat Geometry — circle, rect, triangle, hexagon, star
  • GLSL Shader — Shadertoy-compatible, WebGL2, 4 buffers
  • Particle System — full physics, 93+ sprites, trails
  • MilkDrop — 1,754 presets via Butterchurn
Content & FX Layers
  • Text Overlays — any font (FontFace API), 7 animation styles
  • Image Layer — cover/contain/stretch, Ken Burns pan & zoom
  • Background — solid color, linear or radial gradient
  • Video — local video files, free/cover/contain/stretch fit
  • Titles — animated track title cards for multi-track albums
  • Time Code — playback position overlay; text, progress bar, or both
  • Magic Spell — animated lightning border or orb, audio-reactive
  • Post-Processing — 37 GLSL effects composited as a layer
  • Bloom / Glow — multi-pass blur, per-band audio-reactive strength
  • Lens Flare — 4 presets, draggable source, audio-reactive
Layer System
  • Unlimited layers with drag-to-reorder
  • Per-layer opacity and visibility toggle
  • 10 blend modes — screen, multiply, overlay…
  • Timeline clips with start/end time and fade in/out
  • Automation lanes directly on the timeline
  • Presets — save and reuse layer settings; import/export preset packs
  • Full undo history (Ctrl+Z) for every property change
Automation
  • Any numeric parameter on any layer can be automated
  • LFO — sine, triangle, sawtooth, square, S&H
  • Frequency, amplitude, phase, offset, start/stop times
  • Keyframe curves — place values at audio timestamps
  • Linear, smooth (S-curve), or step interpolation
Audio & Export
  • MP3, WAV, OGG — any browser-decodeable format
  • Multi-track playlists — queue albums, gapless playback
  • Real-time FFT drives all layers simultaneously
  • Per-layer band selector — choose bass, mid, treble, or all
  • Play, pause, seek with millisecond precision
  • WebM (VP9) or MP4 (H.264) at 40 Mbps
  • Audio muxed directly into the exported video
  • Full project save/load as JSON — no server
Portable & Open
  • 100% client-side — no install, no account, no backend
  • Vanilla JS, ES modules, zero dependencies
  • Ships as a ZIP for offline or self-hosted use
  • Service worker caches the app after first visit
  • Open app.html directly or serve from any static host
Ready to create?
Makesomething.
Open MusicViz