Caption Highlight
TikTok-style word highlight captions for Remotion. Install with npx remotion-ui@latest add caption-highlight.
PrimitiveData & mediaAdvanced
caption-highlight30fps · 960×540
Install
$ npx remotion-ui@latest add caption-highlightWord-by-word highlight driven by caption token timestamps.
Advanced. Installs @remotion/captions.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/caption-highlight- Use when: captioned videos, social clips, and synced text scenes.
- Customize: page, activeColor, inactiveColor, fontSize, 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 { CaptionHighlight } from "@/remotion/primitives/caption-highlight";
<CaptionHighlight page={page} activeColor="#60a5fa" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| page* | TikTokPage | - | Caption page from createTikTokStyleCaptions. |
| activeColor | string | "#ff6b00" | Highlight color for the active word. |
| inactiveColor | string | "#111111" | Color for inactive words. |
| fontSize | number | 64 (scaled) | Caption font size in pixels. |
| fontWeight | number | string | 650 | Resting weight. |
| activeWeight | number | string | 800 | Weight the active word steps to. |
| emphasisScale | number | EMPHASIS.subtle (1.05) | Peak scale of the active word. |
| textAlign | "left" | "center" | "center" | Line alignment. |
| frame | number | - | Frame override — pass the parent frame inside a Sequence. |