Guide

How to use MusicFractal.

Five steps from landing on the page to a full-screen audio-reactive visualizer. No setup required.

Step 01Open the visualizer

Visit the home page. The visualizer starts immediately — a default preset runs in attract mode so you can see what it looks like before adding any audio.

  • Best experienced on a desktop or laptop with a dedicated GPU.
  • Chrome and Edge give the best WebGL performance. Firefox works too.
  • Full-screen mode (F key or the expand icon) makes everything more immersive.
Step 02Choose your audio source

Press the audio-source button (bottom-left HUD) to pick how your music enters the visualizer.

  • Upload a file — MP3, WAV, FLAC, OGG, and most other formats work.
  • Use your microphone to visualize live sound or a hardware feed.
  • Paste a radio stream URL (Icecast / SHOUTcast .mp3 or .ogg streams work well).
  • Two sample tracks are built in if you just want to try it instantly.
Step 03Browse and load presets

Click the grid icon (or press Tab) to open the shader library. Search, filter by category, or scroll to find a preset you like — then click it to load.

  • Over 360 Butterchurn presets are available in the library.
  • Staff-picked presets are marked and jump to the top of the list.
  • Presets blend smoothly over ~3 seconds when you switch.
  • Use the left / right arrow keys to cycle through presets hands-free.
Step 04Adjust the visual controls

The on-screen HUD gives you sliders and toggles for the most common parameters. Hide the HUD with H to go full-canvas.

  • Bass boost amplifies low-frequency pulses for harder-hitting visuals.
  • The blend-time slider controls how long a preset transition takes.
  • Three.js geometry overlays (waveform ribbon, particles) can be toggled on or off.
  • The zoom level and warp speed can be adjusted per-preset.
Step 05Use keyboard shortcuts

Most controls have a keyboard shortcut so you can keep your hands free during a performance or session.

TabOpen / close preset shader library
← →Previous / next preset
HToggle HUD visibility
FToggle full-screen
SpacePlay / pause sample track
EscClose any open modal
FAQ

Common questions.

Does my audio get uploaded anywhere?

No. All audio processing happens locally in your browser via the Web Audio API. Nothing is sent to any server. If you upload a file, it stays on your device.

Why isn't anything moving when I load audio?

Most browsers require a user gesture before an AudioContext can run. Click anywhere on the page after loading your audio, then press play. If the visualizer still shows nothing, check that your track is actually playing (the waveform bar at the bottom should show activity).

Which browsers are supported?

Chrome and Edge give the best WebGL performance. Firefox works. Safari has limited WebGL support — visuals will be less smooth. Mobile browsers are generally not recommended due to GPU limitations.

Can I use this for a live performance or stream?

Yes. Window-capture or a virtual camera (OBS, etc.) can record the browser tab for streaming. The visualizer is designed to run continuously without freezing or dropping frames.

Why do some presets look the same until music plays?

Butterchurn presets react to audio energy. Without a signal, many presets show a static or very slowly drifting scene. As soon as audio starts, the beat, bass, and harmonic content drive the animation.

Can I share a specific preset?

Yes — each preset has a dedicated page at /presets/[slug] with a screenshot and a direct launch link. You can also share a URL like /?preset=PRESET_NAME to open the home page with a specific preset pre-loaded.

Ready?

Drop a track. Watch it come alive.

Open visualizerBrowse presets