Voice orb
A hands-free voice chat, with an orb that shows who is talking.
A hands-free voice chat on a card. The orb is a lit glass sphere that swells with whoever is
talking — the accent colour for you, violet for the agent — with what was said underneath and mute
and end below. It draws what you pass through state, level and caption; it never opens the
microphone itself. Talking while muted shows a notice, the way calls do.
Talk to the agent about Pricing v4
Usage
<!-- include core.css + voice-orb.css + voice-orb.js -->
<div class="vor panel" data-m="idle">
<div class="vor-top"><span class="vor-dot"></span><span class="vor-st">Ready</span><span class="vor-t num muted">0:00</span></div>
<div class="vor-orb" aria-hidden="true"><i class="vor-pc"></i><i class="vor-core"><canvas class="vor-gl"></canvas></i></div>
<div class="vor-cap" aria-live="polite"><span class="vor-who muted"></span><p class="vor-tx hint">Talk to the agent about Pricing v4</p></div>
<div class="vor-f">
<button class="pill primary sm vor-go">Start talking</button>
<button class="ib fill vor-mute" aria-label="Mute" aria-pressed="false">…</button>
<span class="sp"></span>
<button class="pill sm vor-end">End</button>
</div>
</div>Properties
| Name | Type | Description |
|---|---|---|
state | idle | listening | thinking | speaking | ended | Where the chat is. muted while listening shows as Muted. |
level | number | How loud whoever is talking is, 0 to 1. The orb swells with it. |
muted | boolean | Your microphone is off; the mute button is pressed and Listening reads as Muted. |
onMutedChange | (muted) => void | The mute button and the notice's Unmute call this. |
mutedNotice | boolean | Shows "You're muted" with an Unmute button, for when someone talks while muted. |
caption | { speaker; text; id? } | What was said last and who said it. A new id (or speaker) starts a new line. |
hint | string | Shown before anything is said, like "Talk to the agent about Pricing v4". |
elapsed | number | Seconds since the chat started, shown top right. |
onStart / onEnd | () => void | Start talking, and End. |
onRestart | () => void | Start again, from the row shown once the chat has ended. |
endedDetail | string | The quiet line under "Voice chat ended". Defaults to the length and "Transcript saved". |
labels | object | Overrides for every bit of text (status words, buttons, notice). |
Theming
Works in light and dark (data-theme="dark") and in the Soft style (data-style="soft"). The orb's
colours flow from the tokens: the accent is yours, --dm-pl (violet) is the agent, and the two are
mixed in oklch so the step between them stays bright. The glass sphere is drawn on a canvas with
WebGL where it can, falling back to layered gradients otherwise; with reduced motion it holds a
single still frame and only redraws when the speaker changes.