Karaoke Captions
Active-word caption styling for social clips.
PrimitiveData & mediaAdvanced
karaoke-captions30fps · 960×540
Install
$ npx remotion-ui@latest add karaoke-captionsCaption primitive for active-word emphasis. Each word crosses one ramp — colour, scale and lift together — with an underline that wipes across the word's own timing.
Use with caption-utils groupCaptionsIntoPages().
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/primitives/karaoke-captions- Use when: captioned videos, social clips, and synced text scenes.
- Customize: page, mode, fontSize, fontWeight, 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 { KaraokeCaptions } from "@/remotion/primitives/karaoke-captions";
<KaraokeCaptions page={page} mode="scale" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| page* | TikTokPage | - | Caption page from @remotion/captions. |
| mode | "scale" | "underline" | "underline" | Active word emphasis style — both modes also pop and lift the word. |
| fontSize | number | 66 (scaled) | Caption size in px. |
| fontWeight | number | string | 800 | Caption weight. |
| emphasisScale | number | EMPHASIS.subtle (1.05) | Peak scale of the active word. |
| activeColor | string | "#ff6b00" | Color the active word crosses to. |
| completedColor | string | "#111111" | Color for words already spoken. |
| inactiveColor | string | "rgba(17,17,17,0.32)" | Color for words not yet spoken. |
| trackColor | string | - | Underline track behind the wipe. Defaults to inactiveColor. |
| frame | number | - | Frame override — pass the parent frame inside a Sequence. |