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 | "#fbbf24" | Highlight color for the active word. |
| inactiveColor | string | "#f8fafc" | Color for inactive words. |
| fontSize | number | 56 (scaled) | Caption font size in pixels. |