# Audio Reactive

Wraps anything and drives its scale, or a glow, from how loud the audio is right now.

```bash
npx shadcn add https://www.reelcn.dev/r/audio-reactive.json
```

Usage:

```tsx
<AudioReactive src={staticFile("track.mp3")} effect="both">
  <Img src={staticFile("logo.png")} />
</AudioReactive>
```

Use for:

- Making a logo, headline or card move with the track
- Reacting to a voice whose tempo you do not know

Avoid:

- A known BPM, where pure math is steadier. Use `use-beat`

Dependencies:

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


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| src | `string` | — | Audio file; `staticFile("…")` or a URL. |
| effect? | `"scale" \| "glow" \| "both"` | `"scale"` |  |
| intensity? | `number` | `1` | How far the effect travels at full volume. 1 is a 20% swell. |
| color? | `string` | — |  |
| windowInSeconds? | `number` | `10` |  |
| children? | `ReactNode` | — |  |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |