# Motion Audio Visualizer

Now playing card in a music studio or podcast player.

- id: `motion-audio-visualizer`
- Page: https://agentic-ui-kit.com/components/motion-audio-visualizer
- Live preview: https://agentic-ui-kit.com/live/component/motion-audio-visualizer

## Install

```bash
agentic-ui add motion-audio-visualizer
npx shadcn@4.17.0 add @agentic-ui/motion-audio-visualizer
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** web-audio-analyser-input, levels-array-input, bars-variant, radial-variant, line-variant, log-spaced-frequency-bands, attack-decay-smoothing, center-aligned-bars, host-owned-playback-state, static-level-meter-fallback, pause-offscreen, semantic-colour-tokens, reduced-motion-fallback
- **Intents:** monitor-live, track-status
- **Suits domains:** music, media, ai-workspace, saas
- **Interaction:** play-pause-host
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** Now playing card in a music studio or podcast player, Per-stem or per-channel activity in a mixer, Speaker output of an AI voice assistant reply
- **Avoid when:** Recording or listening to a voice with a timer and spoken status, which the voice waveform covers, Precise metering where people read decibel values, which needs a labelled meter, Screens with no audio playing, where it would only decorate
- **Preserve when adapting:** aria-hidden-visualizer, host-owned-controls, static-meter-without-motion, transform-only-writes, work-only-in-view
- **Replace when adapting:** audio-source, variant, bands, tone, height, meter-caption
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, button, select
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion