Guide

How to use MusicFractal.

Pick the path that fits you best: create clips, run visuals live, or explore the shader library more deeply. Then use the same five-step loop to get from landing to a finished visual session.

Creator

Start with uploads, open the shader library early, and finish by recording a clean clip.

Performer

Route mic, radio, or uploads into stable shader spaces, then stage the screen for live use.

Explorer

Use sample tracks, browse spaces by feel, and switch into the full shader list when you want specifics.

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 the shader library

Click the grid icon (or press Tab) to open the shader library. Start in Spaces for curated visual worlds, then switch to Shaders when you want exact search, sort, and pack filters.

  • Spaces bundle a shader pool, tuning profile, and visual mode into a faster starting point.
  • Switch to Shaders when you want search, sort, and source-pack filters.
  • 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.

Where should I start in the shader library?

Start in Spaces if you want a strong result quickly — each space groups shaders and tuning into a more intentional visual world. Switch to Shaders when you want to search by name, sort, or filter by pack.

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.