PrimitivePrimitives

wave-text30fps · 960×540

Ridethesine

Install

$ npx remotion-ui@latest add wave-text

An ambient loop, not an entrance.

import { WaveText } from "@/remotion/primitives/wave-text";

<WaveText
  text="Ride the sine"
  amplitude={0.2}
  wavelength={5}
  periodInFrames={44}
/>

It never settles

The wave is a function of the frame, so there is no end state to reach. The entrance is still there underneath — split-text-chars owns it, and every delayInFrames / staggerInFrames / exit prop works as usual — and the amplitude is scaled by each character's own arrival progress, so a character does not start bobbing before it has landed and the line lowers as one on the way out.

Phase follows document order

Phase is keyed off the character's index in the string, not off its stagger rank. A wave that travels in the stagger order of order="random" is not a wave.

Shape

amplitude is the peak lift in em, wavelength is how many characters one full wave spans, and periodInFrames is how long a cycle takes. scale and shade add depth by growing and brightening the crest — set both to 0 for a flat displacement.

Ambient: the wave is a function of the frame and never settles. Phase follows document order, not the stagger rank.

Agent notes

Install first, then import the copied source component locally. AI guide →

Import

@/remotion/primitives/wave-text

Use when: frame-level motion primitives and reusable animation wrappers.
Customize: text, amplitude, wavelength, periodInFrames, plus copied source for timing, layout, colors, and typography.
Rule: do not import this component from the remotion-ui npm package; it is copied into your project.

Usage

Example

import { WaveText } from "@/remotion/primitives/wave-text";

<WaveText text="Ride the sine" amplitude={0.2} wavelength={5} />

API Reference

Prop	Type	Default	Description
text	string	-	The line the wave runs along.
amplitude	number	0.16	Peak displacement, in em of the font size.
wavelength	number	6	Characters per full wave. Higher spreads the crest wider.
periodInFrames	number	48	Frames for one full cycle.
direction	"forward" \| "backward"	"forward"	Travel direction along the line.
scale	number	0.06	Extra scale on the crest, so it reads as depth rather than jitter.
shade	number	0.25	How far the trough fades. 0 keeps every character at full opacity.
staggerInFrames	number	2	Frames between one character arriving and the next.
durationInFrames	number	20	Length of one character's entrance.
delayInFrames	number	0	Frames before the first character arrives.
exitAtInFrames	number	-	Frame the line starts leaving on. The wave lowers with it.

split-text-chars infinite-marquee variable-font-morph

Wave Text