Voice orb
A visual for a voice assistant that reacts to loudness and shows whether it is listening, thinking or speaking.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/voice-orb-aura.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/voice-orb-aura.json
Build a voice assistant interface with a live transcript →
Usage & API
Example
import { VoiceOrbAura } from "@/components/ai/voice-orb-aura"
<VoiceOrbAura
state={state}
/>Props VoiceOrbAura
| Prop | Type & description | Required |
|---|---|---|
state | VoiceState | Required |
level | number0–1 loudness. Leave out to use a built-in simulation. | Optional |
size | number | Optional |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
Aura is a soft blob, about a third of the square, clipped so three coloured lights drift inside it. A slow breathe scales the shape, level swells it further, and thinking adds a faster wobble. The edge is a wobbly loop that gets rougher as level rises, so loud speech breaks the circle and silence settles it. A pale highlight sits toward the upper left, which is what makes the blob read as glassy. Size defaults to 240 and the preview uses 230. There is no bar count. The canvas stays square and shrinks to the container width. Ready damps the colour so the lights recede. The state line under the canvas is part of the preview, directly beneath the blob, with the four-way control below that.
Example
import { VoiceOrbWave } from "@/components/ai/voice-orb-wave"
<VoiceOrbWave
state={state}
/>Props VoiceOrbWave
| Prop | Type & description | Required |
|---|---|---|
state | VoiceState | Required |
level | number0–1 loudness. Leave out to use a built-in simulation. | Optional |
width | number | Optional |
height | number | Optional |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
Waves are four horizontal strokes across a wide canvas, defaulting to 420 by 160. Each stroke is a sine with its own frequency and direction. A bell envelope keeps the ends quiet, and level scales the amplitude from a thin line up to a tall band. In the thinking state the envelope collapses into a narrow ripple that travels back and forth instead of lighting the whole width. Ready fades the strokes. On a dark page the strokes use a lighter blend so they glow. On a light page they draw normally so they do not wash out. The component takes width and height rather than a single size. The same state control sits under the preview. There is no centre orb and no bars.
Example
import { VoiceOrbRadial } from "@/components/ai/voice-orb-radial"
<VoiceOrbRadial
state={state}
/>Props VoiceOrbRadial
| Prop | Type & description | Required |
|---|---|---|
state | VoiceState | Required |
level | number0–1 loudness. Leave out to use a built-in simulation. | Optional |
size | number | Optional |
bars | number | Optional |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
Radial bars draw spokes around a ring. The default count is 72, clamped between 3 and 180, on a square that defaults to 240. Left and right mirror the same noise so the shape stays symmetrical, like a voice print. Level lengthens the spokes. Thinking replaces that speech length with a bright sweep that rotates around the circle. A thin inner ring sits just inside the spokes, and the inner radius grows slightly with level. Ready halves the opacity. The line width scales with the canvas and the count so the spokes do not turn into a solid disk. The preview is the same square-plus-state-control layout as aura. Pass a smaller bars count when the orb is used as a tiny status mark.
Example
import { VoiceOrbBars } from "@/components/ai/voice-orb-bars"
<VoiceOrbBars
state={state}
/>Props VoiceOrbBars
| Prop | Type & description | Required |
|---|---|---|
state | VoiceState | Required |
level | number0–1 loudness. Leave out to use a built-in simulation. | Optional |
size | number | Optional |
bars | number | Optional |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
The equaliser is a short row of vertical rounded bars, five by default, clamped from 1 to 64. The stage defaults to 220 wide and a 5:4 frame. Middle bars are biased taller than the outer ones. While speaking or listening, level and a moving noise drive the height. Thinking replaces that with a wave that travels across the row. Listening also keeps a small sine in the bars when level is low, so a quiet mic still moves. Ready damps the colour. The gradient on each bar runs from the state's colours, left to right across the row. This is the variant to put in a narrow composer. It does not draw a blob, a ring, or a dot field. The preview's state control is unchanged.
Example
import { VoiceOrbGrid } from "@/components/ai/voice-orb-grid"
<VoiceOrbGrid
state={state}
/>Props VoiceOrbGrid
| Prop | Type & description | Required |
|---|---|---|
state | VoiceState | Required |
level | number0–1 loudness. Leave out to use a built-in simulation. | Optional |
size | number | Optional |
dots | numberDots across the widest row. | Optional |
className | string | Optional |
Dependencies
- React
- Tailwind CSS
- motion
Implementation notes
The dot grid fills a square, default size 220, with a round field of dots. The default is 15 dots across the widest row, clamped between 2 and 40. Dots outside the circle are skipped. Speaking pushes rings outward from the centre, and the rings reach farther as level rises. Listening pulls rings inward. Thinking lights a rotating wedge, brighter toward the rim. Ready is a slow dim pulse, and dots that fall under a low brightness draw as a faint neutral instead of a state colour. Colour shifts across the field using the same three tints as the other variants. The canvas is square. Use this one when a full-bleed texture fits the empty state of a call better than a single object in the middle.
Choosing a layout
Use a voice orb when a call needs a state that a person can name. A moving circle is not enough if they cannot tell listening from thinking. The label under the preview, and the canvas accessible name, exist so the state is text as well as motion. Drive state from the recognizer and the model: listening while the mic is open, thinking while you wait, speaking while audio plays out. Feed level from an analyser if you have one. The simulation is there for the preview and for screens that do not have a meter yet. It will not match the caller's real volume.
Do not use it as the whole call UI. Mute, a timer, captions, and ending the call live on Voice session. A running log of both speakers is Live transcript. Choosing the input is Microphone picker, and choosing how the assistant sounds is Voice picker. An orb is also a poor fit for a clip that already has a duration. That is a player, not a state. If reduced motion is on, expect a calmer still frame that still changes colour and size with the state, not a blank box. Keep one orb for the assistant. Nothing in these files draws two speakers at once.
What happens if I omit level?
The canvas simulates loudness from the state and the clock. Thinking stays low and slightly periodic. Listening and speaking use a noise gate so the motion comes in bursts, with speaking peaking higher. Pass a number from 0 to 1, including 0, and the simulation steps aside. Reduced motion uses a fixed level per state when level is omitted, and it stops the phase.
Do all five variants take the same state?
Yes. The state is idle, listening, thinking, or speaking, and the visible names are Ready, Listening, Thinking, and Speaking. Level, when you pass it, is 0 to 1 on every variant. Size props differ: aura, radial, bars, and grid take a size, waves take width and height, and radial, bars, and grid also take a count. The preview's segmented control is demo chrome, not a prop.