Audio Reactive Scale
Scale any child by per-frame audio amplitude in Remotion. Install with npx remotion-ui@latest add audio-reactive-scale.
PrimitiveData & media
$ npx remotion-ui@latest add audio-reactive-scaleWraps anything and scales it by the track's per-frame amplitude.
It draws nothing of its own on purpose — a logo, a chart, or a whole scene can be made to breathe with the music by wrapping it, and the wrapper stays composable with the enter/exit primitives above and below it.
Picking a band
band selects which part of the spectrum drives the motion. bass (the
default) is weighted toward the low end so the element moves on the kick rather
than on hats. full follows overall loudness, which suits speech.
Shared amplitude
The level comes from useAudioAmplitude() in audio-viz-utils, the same path
audio-pulse uses. Two components pointed at one track therefore pump in step
instead of each running their own FFT with slightly different constants.
Source format
useWindowedAudioData() only accepts uncompressed audio, so src must be a
.wav. Pass it through staticFile().
Shares `useAudioAmplitude()` with audio-pulse, so two components on one track pump in step.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/audio-reactive-scale- Use when: audio-first videos, podcast clips, and waveform visuals.
- Customize: src, minScale, maxScale, band, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { AudioReactiveScale } from "@/remotion/primitives/audio-reactive-scale";
<AudioReactiveScale src={staticFile("track.wav")} maxScale={1.2}>
<Img src={staticFile("logo.png")} />
</AudioReactiveScale>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src* | string | - | Audio source. `useWindowedAudioData()` requires an uncompressed .wav. |
| children* | ReactNode | - | Anything to scale with the track. |
| minScale | number | 1 | Scale at silence. |
| maxScale | number | 1.16 | Scale at a full-amplitude hit. |
| band | "low" | "mid" | "high" | "full" | "bass" | "bass" | Which slice of the spectrum drives the motion. |
| sensitivity | number | 1 | Multiplies the level before compression. |
| compression | number | 0.78 | Exponent on the level. Below 1 lifts quiet passages. |
| axis | "both" | "x" | "y" | "both" | Restrict the scale to one axis. |
| tilt | number | 0 | Degrees of rotation at a full hit. |
| minOpacity | number | 1 | Opacity at silence. Left at 1 the wrapper never touches opacity. |
| frame | number | - | Frame override — pass the parent frame inside a Sequence. |