Orb

A React component in Beamline's Voice & audio category.

The agent's presence: a thin ring of light around a lens in the brand's hue that holds still at rest, sends an arc round while thinking and widens with the voice; from a 16px agent mark to a 240px voice screen.

Use it for

The agent's mark beside its messages and in the reasoning header.
Voice screens and calls: listening and talking widen the ring with the volume.
A single busy indicator for an agent (thinking).

Not for

Status in dense UI (spinner).
People (avatar).
Ambient light around a surface (glow).
A precise level (bar-visualizer, live-waveform).

Anatomy

halo (bloom outside the ring)
sphere (the lens)
one (inner light, rises with the voice)
two (the ring of light)
shine (the arc that goes round while thinking)

Variants

agentState: null (idle), thinking, listening, talking
size: any: size-4 … size-60 via className; at 32px and under the bloom hides and the ring thickens
colors: brand-derived --pui-orb-1/2 (default), any two colours (a voice's own ring)

States

idle (still: the ring at rest, its lit side offset by seed; costs nothing)
thinking (one bright arc goes round the ring; the ring dims under it)
listening (a neutral ring widens with input volume)
talking (the ring widens in colour and the lens lights with output volume)
off screen or hidden tab (paused: data-paused)
reduced motion (nothing turns: the thinking arc stands still; listening and talking hold a wider ring)

Keyboard

None; decorative (aria-hidden) unless given a label, then role img.

Motion

Compositor transforms and opacity only, and only while the agent thinks, listens or talks; idle runs no loop. Thinking turns one arc every 4 × --pui-duration-considered. The one script is a volume read, ~30 writes a second, only while listening or talking, on screen and not under reduced motion; it sets --pui-level, which widens the ring and lights the lens. Under reduced motion nothing turns: the thinking arc stands still and listening or talking hold a wider ring.

Props

Prop	Type	Default	Description
`agentState`	`null \| "thinking" \| "listening" \| "talking"`	`null`
`label`	`string`	—	Accessible name; without it the orb is decorative.
`colors`	`[string, string]`	—	Two colours for the ring: its bright side and its fading side. Default: the brand's orb hues.
`colorsRef`	`RefObject<[string, string]>`	—	Live colours read each frame while reacting.
`getInputVolume / getOutputVolume`	`() => number`	—	0–1 getters read while listening / talking.
`inputVolumeRef / outputVolumeRef`	`RefObject<number>`	—	The same as refs.
`volumeMode`	`"auto" \| "manual"`	`"auto"`	manual reads manualInput / manualOutput instead.
`manualInput / manualOutput`	`number`	—
`seed`	`number`	—	Turns where the light falls on the ring, so marks side by side never look stamped, and offsets the thinking arc.
`resizeDebounce`	`number`	—	Deprecated, no effect (kept for compatibility).
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`OrbClassNames`	—

Import

import { Orb } from "@/components/orb/orb";

Get it

Orb is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent

Orb