# Radial Visualizer

Frequency bars arranged around a circle, for cover art and square posts.

```bash
npx shadcn add https://www.reelcn.dev/r/radial-visualizer.json
```

Usage:

```tsx
<RadialVisualizer src={staticFile("track.mp3")}>
  <Img src={staticFile("cover.jpg")} style={{ width: "100%", borderRadius: "50%" }} />
</RadialVisualizer>
```

Use for:

- Square and vertical music posts built around cover art
- A centred visual when a full-width band would not fit

Avoid:

- Wide landscape banners. Use `spectrum`

Dependencies:

- `@remotion/media-utils`
- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| src | `string` | — | Audio file; `staticFile("…")` or a URL. |
| bars? | `number` | `64` | Bars around the circle. |
| size? | `number` | `420` | Diameter of the inner circle, in design units. |
| reach? | `number` | `120` | Longest a bar can reach beyond the circle, in design units. |
| color? | `string` | — |  |
| children? | `ReactNode` | — | Cover art or anything else to sit in the middle. |
| windowInSeconds? | `number` | `10` |  |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |