caption-animation

Caption Animation

Turn a transcript or voiceover into word-timed, scroll-stopping captions: each word pops in on the syllable, the active word highlights, and the text stays glued to the narration. Build the kind of captions that drive watch-time on TikTok, Reels, and Shorts — readable, on-beat, and inside the safe area.

When to use

• Word-by-word or karaoke captions on short-form vertical video (9:16).
• Burning open captions onto a voiceover/narration track from a transcript.
• Turning a Whisper/SRT transcript into animated text in Remotion or on the web.
• Restyling auto-generated subtitles into a branded, "Hormozi-style" reveal.

The pipeline

Stage	Job	Tool
Transcribe	Audio → word-level timestamps	Whisper (@remotion/install-whisper-cpp), AssemblyAI
Normalize	→ { text, startMs, endMs }[] tokens	@remotion/captions Caption type
Page	Group words into 1–4 word "pages"	createTikTokStyleCaptions()
Animate	Per-word pop + active-word highlight	Remotion spring() / CSS
Place	Safe-area, readable type	layout rules below
Export	Burn-in (MP4) and/or sidecar SRT/VTT	Remotion render / file emit

Two non-negotiable rules

1. Word-level timing, not line-level. Karaoke reads as magic only when each word lands on the syllable. Always transcribe to word timestamps; never fake them by splitting a line evenly over its duration — drift is instantly visible.
2. Readability beats style. Captions are read on a phone, in sunlight, muted. Bold sans-serif, heavy stroke or shadow, high contrast first; decoration second. A caption nobody can read is decoration, not a caption.

Word timing from a transcript

Whisper emits word-level timestamps directly. Normalize every source into one flat token shape so the renderer never cares where the words came from:

// Caption token — the one shape everything downstream consumes
type Token = { text: string; startMs: number; endMs: number };

// Parse an SRT cue block "00:00:01,200 --> 00:00:01,640" into ms
const toMs = (t: string) => {
  const [h, m, rest] = t.split(":");
  const [s, ms] = rest.split(",");
  return ((+h * 60 + +m) * 60 + +s) * 1000 + +ms;
};