Word Pop Captions
One word at a time, alone on frame. Install with npx remotion-ui@latest add word-pop-captions.
PrimitiveData & media
$ npx remotion-ui@latest add word-pop-captionsOne word at a time, filling the frame.
import { WordPopCaptions } from "@/remotion/primitives/word-pop-captions";
import { groupCaptionsIntoPages } from "@/remotion/lib/caption-utils";
const [page] = groupCaptionsIntoPages(captions, 4000);
<WordPopCaptions page={page} strokeWidth={4} />Where it sits
No line context, deliberately. caption-highlight and karaoke-captions both
show a full line with an active word, which is right when the sentence matters.
This is the other style: the word is the frame, the eye has nothing to read
ahead to, and the cut rate carries the energy.
Because only one token is on screen, nothing reflows — each word can be scaled, tilted and stroked without disturbing a neighbour.
Gaps stay empty
Between tokens the component renders nothing rather than holding the last word. A word left standing through a pause attributes silence to whoever spoke it, and in this style there is no line for it to sit inside.
Rhythm
tiltInDegrees alternates direction word to word; a single tilt direction at
speed reads as one frame stuttering. accentEvery recolours every nth word,
which keeps a long run from flattening out. Set it to 0 for one colour
throughout.
popInFrames is short by default — a word may only hold for 200ms, so the
arrival has to be over well inside that.
No line context at all, which is what separates it from `caption-highlight` and `karaoke-captions`. Between tokens it renders nothing rather than holding the last word — a word left standing through a pause attributes the silence to whoever spoke it. The tilt alternates because one direction at speed reads as a stutter.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/word-pop-captions- Use when: captioned videos, social clips, and synced text scenes.
- Customize: page, color, accentColor, accentEvery, 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 { WordPopCaptions } from "@/remotion/primitives/word-pop-captions";
import { groupCaptionsIntoPages } from "@/remotion/lib/caption-utils";
const [page] = groupCaptionsIntoPages(captions, 4000);
<WordPopCaptions page={page} strokeWidth={4} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| page | TikTokPage | required | Token page from `groupCaptionsIntoPages`. One token is shown at a time. |
| color | string | "#fafafa" | Word ink. |
| accentColor | string | "#e8b86d" | Ink for every nth word. |
| accentEvery | number | 3 | Accent cadence. 0 keeps one colour throughout. |
| fontSize | number | scaled 120 | Defaults to a width-scaled 120px. |
| uppercase | boolean | true | Uppercase the word — the default look for this style. |
| popScale | number | 1.16 | Peak scale on arrival before it settles to 1. |
| tiltInDegrees | number | 2.5 | Arrival tilt. Alternates direction word to word. |
| popInFrames | number | 6 | Frames the pop takes to settle. |
| strokeWidth | number | 0 | Chunky outline behind the word, as used on social captions. |
| frame | number | undefined | Frame override — pass the parent frame inside a `<Sequence>`. |