An orb that "hears" you isn't a shader — it's a corona, a core, and a ring, all reading the same --amp CSS variable. Here's every piece.

VoiceOrb is a square grid with three absolutely positioned children. The corona is a blurred conic gradient that spins forever. The core is a radial sphere with a specular highlight. The listening ring is a border that only exists while state="listening".

Everything shares the same box. Only which layer is visible — and how hard --amp pushes it — changes with state.

A CSS keyframe that sets transform: rotate(…) will overwrite any inline transform: scale(…). The fix is structural: put amplitude scale on a wrapper, put the spin keyframe on the child. They compose instead of clobbering each other.

The core uses the same pattern: animate-voice-orb-breathe on the outer shell, inline amplitude scale on the painted sphere inside.

Raw analyser levels jitter. Before they touch CSS, they're clamped and eased through c ** 0.6 — quiet speech gets visible life without loud peaks blowing the orb out:

const shape = (a: number) => {
  const c = Math.min(1, Math.max(0, a));
  return c ** 0.6;
};
const level = state === "idle" ? 0 : shape(amplitude);

Idle hard-zeros the level so the breathe keyframe is the only motion. The listening ring also shortens its duration as level rises (1.6 - level * 0.7s), so louder input pulses faster.

useAudioAmplitude turns a MediaStream into that 0–1 level via RMS of the time-domain waveform, cleaned up with cancelAnimationFrame + ctx.close() when the stream drops.

Toggle states and watch the same three layers reconfigure around a live --amp.

Three layers, one shaped number, and a wrapper/child split so transforms compose — that's the whole orb.