VU Meter
Segmented level meter with peak hold. Install with npx remotion-ui@latest add vu-meter.
PrimitiveData & media
$ npx remotion-ui@latest add vu-meterA segmented level meter with peak hold.
import { VuMeter } from "@/remotion/primitives/vu-meter";
<VuMeter src={audioSrc} orientation="vertical" labels={["L", "R"]} />Level, not spectrum
audiogram-bars and waveform-bars-radial show what the frequencies are
doing. This shows only how loud it is — the reading an engineer actually
watches, and the one that still works at 40px wide in the corner of a frame.
Peak hold
At 30fps a transient that lights the top segment for one frame is invisible. The marker comes from the decaying peaks the audio library already tracks, so it is reconstructed from the waveform on every frame rather than held in component state: a render is stateless and may start on any frame, and a ref-held marker would differ between a preview scrub and a full render.
peakFallPerFrame sets how fast the marker drops back.
Two channels
The second channel is weighted toward the upper half of the spectrum. It is not
a real stereo split — the analysis is mono — but it is what stops a pair from
looking like one meter drawn twice. Pass channels={1} when honesty matters
more than the look.
The top eighth of the scale takes peakColor, the third below it warnColor;
a partly lit top segment reads as a level sitting between two steps rather than
snapping down to the lower one.
Level rather than spectrum — the reading that still works at 40px wide. The peak marker is reconstructed from the library's decaying peaks on every frame instead of being held in state: a render is stateless and may start on any frame, so a ref-held marker would differ between a preview scrub and a full render.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/vu-meter- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: src, orientation, segments, channels, 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 { VuMeter } from "@/remotion/primitives/vu-meter";
<VuMeter src={audioSrc} orientation="vertical" labels={["L", "R"]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Audio source. `.wav` only. |
| orientation | "vertical" | "horizontal" | "vertical" | Which way the segments stack. |
| segments | number | 18 | Segments in one channel. |
| channels | 1 | 2 | 2 | Second channel is weighted toward the upper spectrum. |
| thickness | number | 26 | Segment size across the short axis. |
| length | number | 260 | Meter length along its own axis. |
| color | string | "#2dd4bf" | Segments below the warm zone. |
| warnColor | string | "#e8b86d" | Segments in the top third. |
| peakColor | string | "#f472b6" | Segments in the top eighth. |
| showPeakHold | boolean | true | Peak marker that falls back slowly. |
| peakFallPerFrame | number | 0.018 | How fast the peak marker drops. |
| labels | [string, string] | undefined | Channel captions, e.g. `["L", "R"]`. |
| sensitivity | number | 1 | Lifts or lowers the reading before it hits the segments. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |