Component · live demo

Aura

The halo behind every voice surface in ONE. It is a WebGL shader whose motion comes from two plain props — the agent's state and a scalar volume. No LiveKit room, no token, no agent session: that is what makes it usable on a public page.

What each state does

State	Speed	Brightness	Reads volume
`idle` / `disconnected`	10	steady 1.0	no
`listening`	20	pulses 1.5 → 2.0	no
`thinking` / `connecting`	30	pulses 0.5 → 2.5	no
`speaking`	70	steady 1.5	yes — scale rides it

Source: hooks/agents-ui/use-agent-audio-visualizer-aura.ts. Volume only moves the shape while speaking — in every other state the aura animates on its own so a 2-8s model call never reads as a hung page.

Where it is used

/demo/voice — the voice orb, through VoiceVisualizer variant="shader".
SpokenMessageAura — the halo behind a spoken reply in chat.
/features/voice — the feature page.

On branded surfaces the colour is not chosen by hand: VoiceShaderAura resolves a design token to #rrggbb via tokenToHex, because the shader's only colour API is a hex regex that fails silently on oklch and paints every tenant LiveKit cyan.