Voice Assistant Orb — Free HTML CSS JS Snippet

The glowing orb has become the universal visual language for voice AI — Siri, ChatGPT voice mode, Gemini Live, and every AI hardware startup use a soft, living blob of colour that breathes while idle, pulses while listening, and dances while speaking. This component recreates that interface in HTML, CSS, and vanilla JavaScript: a layered gradient orb with a four-state machine (idle → listening → thinking → speaking), expanding pulse rings, an equalizer overlay, and a typewriter transcript of the assistant's reply.

Building the living orb from three blobs

The orb's organic look comes from three absolutely positioned radial-gradient circles — indigo, cyan, and fuchsia — each blurred 14px and combined with mix-blend-mode: screen so overlapping regions add up to bright, shifting hues rather than muddy overlaps. Each blob runs the same vaoDrift keyframe (translate + scale, alternate direction) but at different durations (6s, 7.5s, 9s) with negative animation-delays, so they start mid-cycle and never synchronise. Three out-of-phase loops are enough to make the colour field look continuously random — the same phase-offset trick behind lava-lamp backgrounds like the aurora bg.

The state machine

All behaviour hangs off a single state string and a setState() function that toggles .listening and .speaking classes and updates the status label. Tapping the orb from idle starts listening; the demo then simulates a conversation — 2.6 seconds of listening, 1.1 seconds of thinking, then a typed reply — using setTimeouts collected into a timers array. Every state change first calls clearTimers(), so tapping the orb mid-flow cancels the pending transitions cleanly instead of letting a stale timeout yank the UI back to a dead state. This cancel-on-transition discipline is exactly what you need when wiring real async APIs.

Listening: pulse rings and breathing

In the listening state the orb scales gently between 1 and 1.08 (vaoBreathe), while two border-only rings expand from scale(0.78) to 1.25 and fade out (vaoPulse), the second delayed 0.4s so the pulses alternate — the sonar effect users read as "it can hear me". The rings are pure borders with no fill, so they cost almost nothing to composite, and both animations use only transform and opacity, keeping the whole state GPU-friendly.

Speaking: equalizer and accelerated churn

The speaking state reveals a five-bar equalizer centred on the orb — white bars animating height between 8px and 34px with cascading 0.12s delays — and shortens the blobs' drift duration to 2.4s so the colours churn faster, as if energised by the voice. Meanwhile typeReply() types the assistant's answer character by character (24ms per tick) with a blinking caret built from a step-end opacity keyframe, the same technique as the typewriter effect. The typing loop checks state !== 'speaking' on every tick, so interrupting the assistant stops the text mid-word — matching how real voice UIs handle barge-in.

Connecting real speech APIs

The demo timeouts map one-to-one onto real events: start listening when you call SpeechRecognition.start() (see the speech to text snippet), move to thinking when the final transcript fires and you send it to your LLM, and enter speaking when the response streams back — feeding typeReply() from streamed tokens instead of a fixed string. For output audio, trigger speechSynthesis.speak() alongside the speaking state.

Customisation

Swap the three blob gradients to re-brand the orb, tune drift durations for calmer or wilder motion, resize via the .vao-orb width/height (everything inside is proportional), and replace the demo reply with your streaming response. The label strings live in setState() for easy localisation.