webdevpuneet.com

Related Snippets

175 in Animations category
1–6 of 60

Matter.js Ball Pit Hero Section

Matter.js Rope Bridge You Can Cut

Matter.js Soft-Body Jelly Blobs

Matter.js Drag-and-Throw Physics Playground

Matter.js Newton's Cradle (Drag to Swing)

Rough.js Sketchy Annotation Highlight

Voice Assistant Orb — Free HTML CSS JS Snippet

Voice Assistant Orb · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsCSS Animation

Copy & paste

Source Code

<div class="vao">
  <div class="vao-stage">
    <div class="vao-orb" id="vaoOrb">
      <div class="vao-blob vao-b1"></div>
      <div class="vao-blob vao-b2"></div>
      <div class="vao-blob vao-b3"></div>
      <div class="vao-ring"></div>
      <div class="vao-ring vao-r2"></div>
      <div class="vao-eq" id="vaoEq">
        <i></i><i></i><i></i><i></i><i></i>
      </div>
    </div>
  </div>
  <p class="vao-label" id="vaoLabel">Tap the orb to start listening</p>
  <p class="vao-text" id="vaoText"></p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Layered gradient blob orb
Three blurred radial-gradients with mix-blend-mode: screen and out-of-phase drift loops create a continuously shifting colour field.
Four-state machine
idle → listening → thinking → speaking driven by one setState() that toggles classes and the status label.
Sonar pulse rings
Two border-only rings expand and fade on alternating delays during listening — transform/opacity only, GPU-cheap.
Speaking equalizer
Five cascading bars overlay the orb while speaking, and the blob churn accelerates from 6–9s cycles to 2.4s.
Typewriter transcript
The reply types at 24ms/char with a step-end blinking caret, checking state each tick so interruption stops it mid-word.
Cancel-safe timers
Every pending setTimeout is tracked and cleared on state change, so tapping mid-flow never leaves stale transitions.
Barge-in interaction
Tapping during listening or speaking cancels back to idle — the interruption model real voice assistants use.
Speech-API-ready hooks
The demo timeouts map directly onto SpeechRecognition events and streamed LLM tokens.

About this UI Snippet

Voice Assistant Orb — Animated AI Voice UI with Listening, Thinking, and Speaking States

Screenshot of the Voice Assistant Orb snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste the HTML, CSS, and JSA glowing orb of drifting indigo, cyan, and fuchsia blobs renders on a dark stage with a "Tap the orb to start listening" prompt.
  2. 2
    Tap the orbIt enters the listening state — the orb breathes and two sonar rings pulse outward alternately while the label switches to "Listening…".
  3. 3
    Watch the conversation flowAfter 2.6s it moves to "Thinking…", then to speaking — a five-bar equalizer appears and the reply types out with a blinking caret.
  4. 4
    Interrupt itTap the orb during any state to cancel — all pending timers clear and the orb settles back to idle, mid-sentence if it was speaking.
  5. 5
    Wire real speech APIsMap the states onto SpeechRecognition events and your LLM stream: listening on start(), thinking on final transcript, speaking as tokens arrive.
  6. 6
    Re-brand the orbSwap the three radial-gradient colours and drift durations; the size scales from the single .vao-orb dimension.

Real-world uses

Common Use Cases

AI voice assistant apps
The centrepiece of a voice mode screen — pair with speech to text for real input and an ai chat interface for the transcript view.
AI product landing pages
An animated hero object that demos the product's voice loop; sits well over a wavy background.
In-app voice search
Replace a mic icon with the orb while capturing a spoken query.
Smart-home dashboards
A wall-tablet assistant presence that visibly reacts to wake words and responses.
Meditation and wellbeing apps
The idle breathing state doubles as a calming focus object — compare the breathing animation.
Learning blend-mode animation
A reference for screen-blended gradient blobs, phase-offset loops, and class-driven state machines.

Got questions?

Frequently Asked Questions

Each blob is a blurred radial-gradient in one hue, and mix-blend-mode: screen makes overlaps additive — indigo over cyan brightens toward white-blue instead of darkening. All three run the same drift keyframe but at 6s, 7.5s, and 9s with negative delays, so their phases never align and the composite never visibly repeats. Changing any one duration changes the whole orb's character.

The demo chains listening → thinking → speaking with nested timeouts. If the user taps the orb mid-chain, a forgotten timeout would still fire later and drag the UI into a wrong state. clearTimers() runs at the start of every click, cancelling everything pending, and the typewriter additionally checks state !== 'speaking' each tick. This cancel-on-transition pattern is essential once real async APIs replace the timeouts.

On tap, call recognition.start() (webkitSpeechRecognition) and setState('listening'). In onresult with a final transcript, setState('thinking') and POST the text to your model. As the response streams, setState('speaking') and append tokens to the transcript element instead of running the fixed-string typewriter; optionally speak them with speechSynthesis. Errors and onend map to setState('idle').

No — almost everything animates transform and opacity, which the compositor handles on the GPU without layout or paint. The blurs are static filters applied once, not animated. The one exception is the equalizer bars animating height, but they are five 6px elements, so relayout cost is negligible. On low-power devices you can honour prefers-reduced-motion by pausing the drift and pulse animations in a media query.

Model state ('idle' | 'listening' | 'thinking' | 'speaking') in useState / ref() / a component field and derive the CSS classes from it in the template — the setState function dissolves into declarative bindings. Timers and speech-API subscriptions belong in useEffect / onMounted / ngOnInit with cleanup that clears them on unmount and on state change. The blob, ring, and equalizer keyframes are pure CSS and port unchanged.