# Waveform
Source: https://ui.spencerwueste.com/docs/components/waveform
Markdown: https://ui.spencerwueste.com/llm/components/waveform.md

> Audio-style bar visualizer for voice input and text-to-speech playback, animated in CSS.

> Live preview: https://ui.spencerwueste.com/docs/components/waveform (demo source: `src/demos/waveform-demo.tsx`)

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/waveform.json
```

Registry JSON: https://ui.spencerwueste.com/r/waveform.json

## Usage

```tsx
import { Waveform } from "@/components/pandacoderz-ui/waveform";
```

```tsx
<Waveform active={isListening} bars={32} height={48} />
```

Pass `levels` to render real audio. Feed it from an `AnalyserNode` on each animation frame and the bars follow the microphone instead of the built-in animation.

```tsx
const levels = React.useMemo(() => Array.from(frequencyData, (v) => v / 255), [frequencyData]);
<Waveform levels={levels} bars={levels.length} />
```

## API Reference

| Prop | Type | Description |
| --- | --- | --- |
| `bars` | `number` | Number of bars. Default `24`. |
| `active` | `boolean` | Animate. When false, bars flatten. |
| `levels` | `number[]` | 0–1 per bar; overrides the animation. |
| `height` | `number` | Height in px. Default `40`. |
| `duration` | `number` | Base animation duration in seconds. Default `0.9`. |
| `color` | `string` | Bar color. Defaults to `currentColor`. |