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. 1

    Run this command in your Tailwind CSS project. It adds components/ai/voice-orb-aura.tsx and 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

voice-orb-aura.tsx
import { VoiceOrbAura } from "@/components/ai/voice-orb-aura"

<VoiceOrbAura
  state={state}
/>

Props VoiceOrbAura

PropType & descriptionRequired
stateVoiceStateRequired
levelnumber0–1 loudness. Leave out to use a built-in simulation.Optional
sizenumberOptional
classNamestringOptional

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.

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.