Waveform Line
Audio waveform line visualization.
PrimitiveData & mediaAdvanced
waveform-line30fps · 960×540
Install
$ npx remotion-ui@latest add waveform-lineMirrored amplitude envelope powered by @remotion/media-utils, with the played
portion tinted. Pass variant="line" for the raw oscilloscope trace.
Advanced. Installs @remotion/media-utils.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/waveform-line- Use when: audio-first videos, podcast clips, and waveform visuals.
- Customize: src, width, height, variant, 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
Example
import { WaveformLine } from "@/remotion/primitives/waveform-line";
<WaveformLine src={staticFile("voice.wav")} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src* | string | - | Audio source. |
| width | number | - | Drawing width. Defaults to the composition width — pass the slot width inside padding. |
| height | number | 144 | SVG waveform height. |
| variant | "envelope" | "line" | "envelope" | Mirrored amplitude band, or the raw oscilloscope trace. |
| samples | number | 88 / 128 | Envelope buckets (88) or trace samples (128). |
| windowInSeconds | number | 1.2 | Audio window drawn around the current frame. |
| mirror | boolean | false | Reflected copy of the trace. Ignored by the envelope variant, which is already mirrored. |
| progress | number | - | Optional 0-1 played progress override. |
| amplitudeScale | number | 0.94 / 0.48 | Vertical gain — envelope default 0.94, line default 0.48. |
| normalize | boolean | true | Normalize the visible window for readable quiet audio. |
| showBaseline | boolean | true | Render the center baseline. |