Guides
Captions
Build captioned Remotion videos with CaptionScene, karaoke modes, and social clip templates.
RemotionUI caption components work with Remotion's native Caption type — for TikTok-style word highlights, karaoke scale, or full caption scenes in vertical social clips.
Install
Install
$ npx remotion-ui@latest add caption-scene caption-highlightThis installs @remotion/captions and caption-utils.
For a complete 9:16 template:
Recipe
$ npx remotion-ui@latest add --recipe captioned-social-videoPipeline
- Transcribe audio to captions JSON (Whisper, SRT import, or
@remotion/openai-whisper) - Load captions in your composition (fetch with
useDelayRenderif remote) - Group into pages with
groupCaptionsIntoPages()fromcaption-utils - Render with
CaptionSceneor wire intoSocialClip/PodcastClip
Caption components
| Component | Use when |
|---|---|
| CaptionScene | Full-frame synced caption layout |
| CaptionHighlight | Word-level color emphasis |
| KaraokeCaptions | Scale or underline active word |
| CaptionBumper | Short insight text between scenes |
CaptionScene supports mode: highlight, karaoke-scale, or karaoke-underline. Flagship compositions default to karaoke-scale for social-ready motion.
Example
Example
import { CaptionScene } from "@/remotion/scenes/caption-scene";
import type { Caption } from "@remotion/captions";
<CaptionScene
captions={captions}
mode="karaoke-scale"
pagesPerScene={1}
/>;See caption-scene for the full API and Captioned social video for a full template recipe.