Music Reactive
Audio Reactive
Needs Microphone
WebGL

Wavy Shells: setup, controls, and troubleshooting

Get Wavy Shells rippling with your music — how to turn on the microphone, what Brightness actually does, and why there's no Color or Speed control.

Open Wavy ShellsUpdated August 6, 2026

Wavy Shells renders six nested, translucent shell layers in 3D, each one mapped to a different frequency band and rippling with organic, noise-based wave distortions. When your microphone is on, the innermost red shell swells with bass, the four middle shells (orange, green, cyan, and blue) pick up the low-mid through high-mid range moving outward, the outermost purple shell catches the highest treble, and beats trigger a burst of scale and rotation across all six — turning a screen into a slow-moving, music-driven light sculpture rather than a static color.

Before you start

  • Microphone access. The effect asks for it only when you turn on Music Reactive, not when the page loads. Your browser shows its own permission prompt — allow it, or the shells keep drifting on a calm, non-reactive ripple instead.
  • 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.
  • A device that can handle a demanding 3D scene. Six shader-based shell layers with additive blending are more GPU work than a flat effect. Most modern laptops and phones manage it; older or integrated graphics may stutter, and this effect has no quality setting to scale that back.

Set it up

  1. Open the Wavy Shells effect on the screen you want to display it on.
  2. In the Controls panel, open the Audio group and turn on Music Reactive.
  3. Allow microphone access when your browser prompts you.
  4. Play music where the microphone can pick it up, at a volume loud enough for it to register over room noise.
  5. Open the settings panel and set Brightness for your room, then select Go Fullscreen.

You'll know it worked when the switch stays on after the permission prompt, and the shells start rotating, scaling, and shifting color in time with the sound instead of drifting on their own.

What each control does

ControlRangeDefaultWhat it changes
Music ReactiveOn/OffOffListens through your microphone so the shells rotate, scale, and shift color with the music. Turning it off stops the microphone.
Brightness10–10080Scales the point lights around the scene and the shells' own surface shading together. The main dial for a dim, hard-to-see scene versus a blown-out, washed-out one.

There's no Color or Speed control on this effect's settings panel — Brightness is the only slider it exposes. Shell colors are fixed to a red-through-purple gradient set by frequency band.

Common setups

  • Party centerpiece on a TV or projector. Brightness 85–100, speakers loud enough for the mic to register clearly over the room. Full-range dance or electronic tracks light up all six shells instead of just the center.
  • Ambient background for a stream. Brightness 50–60, quieter ambient or downtempo music nearby. The shells stay in gentle motion without dominating the frame on camera.
  • Meditation or chillout session. Brightness 40–50, slow instrumental or ambient tracks with sustained bass and mid tones. The ripple reads as calm rather than reactive when the source material doesn't spike much.
  • Dim room at night. Brightness 65–75 rather than 100. The additive glow from the shells' fresnel edges already adds a lot of light on its own; pushing Brightness to the top tends to wash out the color gradient between shells.

Troubleshooting

The Music Reactive switch won't stay on, or reverts back on its own. 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 turn Music Reactive on again.

The shells ripple gently but never react to the music that's playing. The microphone isn't hearing the audio. This happens on headphones, with the system audio 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.

Only the center shells move, and the outer ones stay still. The music is bass-heavy with little mid or treble content, so only the inner frequency bands have anything to respond to. Play a track with a fuller frequency range — vocals, cymbals, or synths in the higher end will animate the outer blue and purple shells.

The display stutters or drops frames. This effect has no performance or quality setting to reduce, unlike some of the other music-reactive effects. Close other tabs or apps competing for the graphics card. If it still stutters, a lighter effect like Shimmer will run more smoothly on the same hardware.

The screen stays black and no shells appear 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.

Next steps

For another audio-reactive 3D scene with a different look, try Liquid Glass. For a flatter, more graphic take on frequency response, see Circular Wave.

Frequently asked questions

Ready to use Wavy Shells?

Fluid, organic shells that ripple and flow with your music - each layer responds to different frequency bands creating mesmerizing wave patterns

Open Wavy Shells

Related help