RemotionUI
Signals

Caption Highlight

TikTok-style word-by-word caption highlight.

PrimitivesignalsAdvanced

Install
npx remotion-ui@latest add caption-highlight

Word-by-word highlight driven by caption token timestamps.

Live preview
Advanced — installs @remotion/captions.

AI usage

Install first, then import the copied source component locally.

AI guide

Install

npx remotion-ui@latest add caption-highlight

Import after install

@/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-ui npm package; it is copied into your project.

Usage

import { CaptionHighlight } from "@/remotion/primitives/caption-highlight";

<CaptionHighlight page={page} activeColor="#60a5fa" />

API Reference

PropTypeDescription
page*TikTokPageCaption page from createTikTokStyleCaptions.
activeColorstringHighlight color for the active word.
inactiveColorstringColor for inactive words.
fontSizenumberCaption font size in pixels.

Related