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
$ npx remotion-ui@latest add caption-scene caption-highlightThis installs @remotion/captions and caption-utils.
For a complete 9:16 template:
Pipeline
- 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.
Using captions over real footage
These are overlays meant to sit directly on top of your video — there is no card or background behind the text by default. Two things matter for that to stay legible:
- Contrast, not decoration.
CaptionScenedefaults tostyle="shadow": a drop shadow on the text plus a light bottom scrim onlower-thirdplacement, tuned to hold up on live-action footage without putting a visible box in the frame. If your footage is unusually busy or low-contrast (screen recordings with white backgrounds, bright skies), switch tostyle="boxed", which adds a solid line-hugging background — the same convention YouTube and Instagram use for auto-captions. - Safe area, not raw offsets. Placement always resolves through the
shared safe-area insets (
getSafeAreaPadding), so captions never sit under a platform's UI chrome (TikTok's reply bar, Reels' caption zone) at the edges of the frame. Don't overridetop/leftpositioning manually — passplacement="lower-third"orplacement="center"instead.
The individual primitives (CaptionHighlight, KaraokeCaptions,
WordPopCaptions) carry the same shadow legibility default when used on
their own outside of CaptionScene.
Example
import { CaptionScene } from "@/remotion/scenes/caption-scene";
import type { Caption } from "@remotion/captions";
<CaptionScene
captions={captions}
mode="karaoke-scale"
style="shadow"
/>;See caption-scene for the full API and social-clip for a full template composition.