Voice Note Bubble
Chat-style audio message with waveform and playhead. Install with npx remotion-ui@latest add voice-note-bubble.
PrimitiveData & media
$ npx remotion-ui@latest add voice-note-bubbleA chat-style audio message: waveform, playhead and running time.
import { VoiceNoteBubble } from "@/remotion/primitives/voice-note-bubble";
<VoiceNoteBubble durationInFrames={120} sender="Sam" avatar="S" />The waveform is static
Only the colour moves through it, which is how every messaging app draws this. A bar chart that animated its heights would be a live spectrum — a different claim entirely, and one that contradicts the fact that a voice note's shape is known before you press play.
The bar being crossed blends between the two colours, so the boundary travels smoothly instead of stepping bar by bar.
Position comes from frames
durationInFrames drives the playhead, not audio analysis, so the bubble can
front a note that is described rather than played — and the playhead lands on
the frame the edit says it should. delayInFrames staggers a second bubble in a
conversation.
Waveform data
Pass real per-bar levels as waveform when you have them. Otherwise a
deterministic envelope is generated from seed: bursts of syllables inside
phrases with short gaps, because flat noise reads as a machine and a single sine
reads as a tone. Changing seed changes the shape and nothing else.
The waveform is static and only the colour moves through it, as every messaging app draws it — animating bar heights would be a live spectrum, which contradicts the fact that a voice note's shape is known before playback. Position comes from frames, not analysis, so the bubble can front a note that is only described.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/voice-note-bubble- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: durationInFrames, waveform, barCount, seed, 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 { VoiceNoteBubble } from "@/remotion/primitives/voice-note-bubble";
<VoiceNoteBubble durationInFrames={120} sender="Sam" avatar="S" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| durationInFrames | number | required | Length of the note. The playhead crosses the bar over exactly this. |
| waveform | number[] | generated | Bar heights 0–1. Omitted, a deterministic envelope is built from `seed`. |
| barCount | number | 42 | Bars drawn when the waveform is generated. |
| seed | number | 1 | Changes the generated envelope and nothing else. |
| barHeight | number | 44 | Tallest bar. Type and padding scale off it. |
| avatar | string | undefined | Initial or emoji in the round badge. |
| sender | string | undefined | Name above the waveform. |
| showTime | boolean | true | Elapsed / total readout under the bar. |
| align | "left" | "right" | "left" | Side of the frame the bubble sits on. |
| showPlayhead | boolean | true | Dot riding the played/unplayed boundary. |
| delayInFrames | number | 0 | Frames before the playhead starts moving. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |