Bar visualizer

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

A row of bars that says what a voice agent is doing: a sweep while connecting, the person's voice while listening, a slow breath while thinking, the agent's voice while talking. Bars move only while there is something to show.

Use it for

The state indicator of a voice agent: a call screen, a voice button, a conversation bar.
Showing that the agent hears you, without a full waveform.

Not for

A recording's shape (waveform).
Recording feedback with history (live-waveform).
The agent's presence or avatar (orb).

Anatomy

bars (5–40)
state caption (optional, visible)
reduced-motion level number

Variants

align: center, bottom
size: sm, md, lg

States

idle (still)
connecting (a highlight sweeps across)
listening (follows the source)
thinking (bars breathe together)
talking (follows the source, accent)
off screen (stopped)
reduced motion (still bars by state, a dB number while sound plays)

Keyboard

None: a picture of the agent's state (role img named by the state).

Motion

Bars are transforms written straight to the DOM each frame while listening or talking, on screen; connecting and thinking are compositor CSS loops tied to the state; idle runs nothing. Under reduced motion nothing loops: connecting holds every other bar raised, thinking an even row in the accent, both with the state in words; listening and talking show a dB number.

Props

Prop	Type	Default	Description
`state`	`null \| "connecting" \| "listening" \| "thinking" \| "talking"`	`null`	The same vocabulary as Orb and useVoiceAgent's agentState.
`source`	`MediaStream \| LevelSource \| (() => number) \| null`	—	Whose voice to draw: the person's while listening, the agent's while talking.
`bars`	`number`	`15`
`align`	`"center" \| "bottom"`	`"center"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Heights 24 / 48 / 96 px.
`showLabel`	`boolean`	—	A visible caption with the state in words.
`label`	`string`	`"Agent"`	Who the bars are about; the accessible name reads "Agent, listening".
`classNames`	`BarVisualizerClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—

Import

import { BarVisualizer } from "@/components/bar-visualizer/bar-visualizer";

Get it

Bar visualizer 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