Liquid Glass renders layered, transparent glass panels that ripple and refract light across the screen, with the wave motion, light intensity, and glass material shifting as your microphone picks up music. It turns a screen into a moving, reactive light source for a party, stream, or display rather than a static color or pattern.
Before you start
- Microphone access. The effect asks for it only when you turn on Music Reactive, not on page load. Your browser will show its own permission prompt — allow it, or the effect keeps running with a calm, non-reactive wave instead.
- A device that can handle a demanding 3D effect, with graphics acceleration turned on in the browser. Most modern laptops and phones manage it; very old hardware, or a browser with that setting switched off, may show a blank screen.
- Music your microphone can actually hear. The effect reads live mic input, not your system's audio output. Speakers in the room work; headphones do not.
Set it up
- Open the Liquid Glass effect on the screen you want to display it on.
- Select Enable Music Reactive in the top-left corner of the preview.
- Allow microphone access when your browser prompts you.
- Play music where the microphone can pick it up, and check the volume is loud enough for the mic to register it.
- Open the settings panel and set Performance Quality and Rendering Mode for your hardware and mood, then select Go Fullscreen.
You'll know it worked when the button reads Music Reactive ON with a green Live badge next to it, and the glass surface starts stretching and rippling in time with the sound instead of drifting on its own.
What each control does
| Control | Range | Default | What it changes |
|---|---|---|---|
| Brightness | 10–100 | 80 | Scales every light in the scene together. The main dial for "too dark" or "too washed out." |
| Performance Quality | Low, Medium, High | Medium | The render cost. Low draws 2 glass ribbons, 1 glowing orb, and the least floating dust, on a coarse mesh it reshapes every third frame. Medium moves to 3 ribbons and 2 orbs on a finer mesh, reshaped every second frame. High draws 4 ribbons and 3 orbs at full mesh detail, reshaped every frame. The glass still reacts to sound at all three settings — quality changes how much there is to look at and how smoothly it moves, not whether it responds. |
| Rendering Mode | Reactive, Artistic | Reactive | Reactive drives the waves from live microphone input every frame. Artistic instead captures a snapshot of the audio periodically and smoothly blends toward each new one, producing slower, steadier motion. |
| Capture Interval | 3–10 seconds | 5 | How often Artistic mode captures a new audio snapshot to blend toward. Only shown when Rendering Mode is set to Artistic; it does nothing in Reactive mode. |
The Color option on this effect's panel does not change anything — see Troubleshooting below.
Common setups
- Party on a laptop with dedicated graphics. Performance Quality High, Rendering Mode Reactive, Brightness 80–90. All four glass ribbons and three orbs track the music closely.
- Older laptop or built-in graphics. Performance Quality Low, Rendering Mode Reactive. Cuts the mesh detail and drops to 2 ribbons and 1 orb so the frame rate stays usable.
- Ambient background for a stream or lobby screen. Rendering Mode Artistic, Capture Interval 8–10, Performance Quality Medium. The scene changes every several seconds instead of chasing every beat, which reads as less distracting on camera.
- Default, no tuning needed. Performance Quality Medium, Rendering Mode Reactive, Brightness 80 — this is what loads before you touch anything.
Troubleshooting
The Music Reactive button won't turn on, or reverts to "Enable Music Reactive." Microphone access was denied or blocked. Check your browser's address bar for a blocked-microphone icon and allow access there, or check your operating system's privacy settings to confirm the browser itself can use the microphone, then select Enable Music Reactive again.
The glass ripples gently but never reacts to the music playing. The microphone isn't hearing the audio. This happens on headphones, with the system muted, or with the volume too low for the mic to pick up over room noise. Switch to speakers, raise the volume, or move the microphone closer to the source.
The display stutters or drops frames. This is a rendering-cost problem, not a bug. Set Performance Quality to Low — compared with High it drops to roughly a fifth of the surface detail, reshapes the glass every third frame instead of every frame, and draws two fewer ribbons and two fewer orbs. If Low still stutters, close other tabs competing for the graphics card.
The screen stays black and no glass appears at all. Graphics acceleration is most likely switched off in your browser. Turn it on in your browser's settings, and confirm your graphics drivers are current. If it still won't render, Full Screen Light is a much simpler effect that works almost anywhere — open it to confirm the rest of the site works.
Changing the Color option does nothing. This is expected on the current build — Liquid Glass's panels stay in their white/glass palette regardless of the Color picker. Use Brightness, Performance Quality, and Rendering Mode instead; those are the controls this effect actually responds to.
Artistic mode looks stuck on one look for a long time. If the microphone reads silence right when a capture fires, that snapshot has no audio in it and the scene falls back to a calm idle wave until the next capture. Keep music playing continuously through a capture cycle, or lower Capture Interval toward 3–4 seconds so a quiet moment matters less.
Next steps
For a more literal party centerpiece, try Disco Mode. For another audio-reactive wave surface with a different look, see Wavy Shells.