Waveform Bars Radial
Circular bars around a centre element. Install with npx remotion-ui@latest add waveform-bars-radial.
PrimitiveData & media
$ npx remotion-ui@latest add waveform-bars-radialA spectrum wrapped into a circle, around whatever sits in the middle.
import { WaveformBarsRadial } from "@/remotion/primitives/waveform-bars-radial";
<WaveformBarsRadial src={audioSrc} radius={112} barCount={80}>
<CoverArt />
</WaveformBarsRadial>Where it sits
Different geometry from audiogram-bars, which is a straight row. A ring frames
a centre element instead of underlining it and reads at any aspect ratio, which
is why it is the shape social audio clips use.
Mirroring
mirror reflects the spectrum across the vertical axis and is on by default. A
ring that runs low-to-high all the way round puts every bit of energy on one
side, so the shape wobbles rather than pulses. Mirroring also halves the number
of distinct bands the ring needs, so the spectrum is not stretched across twice
as many bars as it has resolution for.
Motion at rest
spinPerSecond turns the whole ring slowly. It matters more than it looks:
through a quiet passage the bars barely move, and a still ring is exactly what
the preview audit reports as a dead frame. bidirectional grows bars inward as
well as outward, which suits a thin centre element.
The source must be a .wav — useWindowedAudioData accepts nothing else — and
while it loads the bars run on the library's deterministic idle envelope rather
than sitting flat.
Mirroring is on by default because a ring running low-to-high all the way round puts every bit of energy on one side, so it wobbles rather than pulses; it also halves the bands needed. The slow spin matters: through a quiet passage a still ring is exactly what the preview audit reports as dead.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/waveform-bars-radial- Use when: audio-first videos, podcast clips, and waveform visuals.
- Customize: src, radius, barCount, barWidth, 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 { WaveformBarsRadial } from "@/remotion/primitives/waveform-bars-radial";
<WaveformBarsRadial src={audioSrc} radius={112} barCount={80}>
<CoverArt />
</WaveformBarsRadial>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Audio source. `.wav` only — `useWindowedAudioData` accepts nothing else. |
| children | ReactNode | undefined | Content in the middle of the ring: artwork, a logo, a title. |
| radius | number | 150 | Radius of the circle the bars stand on. |
| barCount | number | 72 | Bars around the ring. |
| barWidth | number | 5 | Bar thickness in px. |
| minLength | number | 10 | Bar length at silence. |
| maxLength | number | 90 | Bar length at full level. |
| peakColor | string | undefined | Second colour for bars above 75% level. |
| mirror | boolean | true | Reflect the spectrum across the vertical axis. |
| spinPerSecond | number | 6 | Degrees the ring turns per second. 0 holds it still. |
| bidirectional | boolean | false | Bars grow inward as well as outward. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |