Voice

Bar Visualizer

A real-time audio frequency visualizer with state-based animations for voice agents and audio interfaces.

Loading visualizer...

Installation

Option A: Via Sora UI CLI (Recommended)

If your project uses `shadcn/ui`, you can install this component and its dependencies automatically:

npx soraui-cli add bar-visualizer

Option B: Manual Copy-Paste

1. Copy the code from the Code > Component tab above.

2. Paste it in your project at components/bar-visualizer.tsx.

3. Install the dependencies:

npm install framer-motion lucide-react clsx tailwind-merge

API Reference

Complete properties reference for the Bar Visualizer. Customize state visual themes, vertical alignments, bar counts, and heights.

Prop	Type	Default	Description
`state`	`AgentState`	`—`	Voice assistant state: 'connecting' \| 'initializing' \| 'listening' \| 'speaking' \| 'thinking'
`barCount`	`number`	`15`	Number of visualizer frequency bars to display.
`mediaStream`	`MediaStream`	`—`	Real-time HTML5 MediaStream microphone/audio source to analyze.
`minHeight`	`number`	`20`	Minimum bar height percentage (0 to 100).
`maxHeight`	`number`	`100`	Maximum bar height percentage (0 to 100).
`demo`	`boolean`	`false`	Force demo simulation mode bypassing audio context.
`centerAlign`	`boolean`	`false`	Align visualizer bars from center line rather than bottom.

Examples

Bottom-Aligned Demo

Standard bottom-aligned visualizer with demo data.

App.tsx

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

export default function Demo() {
  return (
    <BarVisualizer 
      state="listening" 
      barCount={15} 
      demo={true} 
    />
  );
}

Centered-Aligned Demo

Center-aligned growing visualizer, styled with orange-to-amber speaking gradient.

App.tsx

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

export default function App() {
  return (
    <BarVisualizer 
      state="speaking" 
      barCount={20} 
      centerAlign={true} 
      demo={true} 
    />
  );
}