{"id":5091,"date":"2026-02-06T10:58:40","date_gmt":"2026-02-06T02:58:40","guid":{"rendered":"https:\/\/crepal.ai\/blog\/?p=5091"},"modified":"2026-02-06T10:58:43","modified_gmt":"2026-02-06T02:58:43","slug":"blog-how-to-create-tiktok-style-captions-remotion","status":"publish","type":"post","link":"https:\/\/crepal.ai\/blog\/aivideo\/blog-how-to-create-tiktok-style-captions-remotion\/","title":{"rendered":"How to Create TikTok-Style Captions in Remotion (SRT Import + Word Highlight)"},"content":{"rendered":"\n

Dora is here. I was scrolling through TikTok<\/strong> last week and kept seeing these animated captions \u2014 you know, the ones where each word pops up with a little bounce and highlight as it’s spoken. They’re everywhere now. Product reviews, tutorials, memes, all of it.<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n

So naturally, I wondered: could I build this in Remotion<\/a><\/strong>?<\/p>\n\n\n\n

Turns out, yes. Remotion added native subtitle support in v4.0.216, and by February 2026, the workflow for TikTok-style word-by-word captions is pretty solid. I tested it on February 3-5, 2026, and got it working \u2014 SRT import, word-level timing, bounce animations, the whole thing.<\/p>\n\n\n\n

Here’s how to set it up without breaking your render, plus the exact recipe for that TikTok highlight effect.<\/p>\n\n\n\n

Caption Inputs That Won’t Break (SRT\/JSON)<\/h2>\n\n\n\n

You need captions in a format Remotion can read. Remotion’s @remotion\/captions package<\/a> uses a standardized Caption<\/code> type:<\/p>\n\n\n\n

\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
{\n  text: \"Hello\",\n  startMs: 0,\n  endMs: 500,\n  timestampMs: 250,\n  confidence: 1\n}<\/code><\/pre>\n\n\n\n
Option 1: SRT Files (Most Compatible)<\/h3>\n\n\n\n
Use Remotion’s parseSrt() function<\/code>:<\/p>\n\n\n\n
import { parseSrt } from '@remotion\/captions';\nimport { staticFile } from 'remotion';\n\nconst srtContent = await fetch(staticFile('captions.srt')).then(r => r.text());\nconst { captions } = parseSrt({ input: srtContent });<\/code><\/pre>\n\n\n\n
Critical:<\/strong> SRT file must be in public\/<\/code> and referenced via staticFile()<\/code>.<\/p>\n\n\n\n
Option 2: JSON from Whisper<\/h3>\n\n\n\n
For new transcriptions, use Whisper via @remotion\/install-whisper-cpp<\/code>. Output is already in Caption<\/code> format:<\/p>\n\n\n\n
import whisperOutput from '.\/whisper-output.json';\nconst captions = whisperOutput;<\/code><\/pre>\n\n\n\n
I tested both on February 3rd. SRT took 30 seconds. Whisper took 2-3 minutes but gave word-level timing automatically.<\/p>\n\n\n\n
What doesn’t work:<\/strong> VTT, ASS\/SSA, or plain text files. Convert to SRT first.<\/p>\n\n\n\n
Step-by-Step: Import \u2192 Sync \u2192 Style<\/h2>\n\n\n\n
Step 1: Import and Parse<\/h3>\n\n\n\n
Put your SRT in public\/captions.srt<\/code>:<\/p>\n\n\n\n
import { parseSrt } from '@remotion\/captions';\nimport { staticFile } from 'remotion';\nimport { useEffect, useState } from 'react';\n\nconst [captions, setCaptions] = useState([]);\n\nuseEffect(() => {\n  fetch(staticFile('captions.srt'))\n    .then(r => r.text())\n    .then(srtText => {\n      const { captions } = parseSrt({ input: srtText });\n      setCaptions(captions);\n    });\n}, []);<\/code><\/pre>\n\n\n\n
Step 2: Sync with Timeline<\/h3>\n\n\n\n
import { useCurrentFrame, useVideoConfig } from 'remotion';\n\nconst frame = useCurrentFrame();\nconst { fps } = useVideoConfig();\nconst timeMs = (frame \/ fps) * 1000;\n\nconst currentCaption = captions.find(\n  cap => timeMs >= cap.startMs && timeMs < cap.endMs\n);<\/code><\/pre>\n\n\n\n
Step 3: Render with Basic Styling<\/h3>\n\n\n\n
<div style={{\n  position: 'absolute',\n  bottom: 100,\n  left: '50%',\n  transform: 'translateX(-50%)',\n  fontSize: 48,\n  fontWeight: 'bold',\n  color: 'white',\n  whiteSpace: 'pre', \/\/ Critical for word spacing\n}}>\n  {currentCaption?.text || ''}\n<\/div><\/code><\/pre>\n\n\n\n
The whiteSpace: 'pre'<\/code> is critical \u2014 without it, spaces collapse and word timing breaks.<\/p>\n\n\n\n
Prevent Subtitle Drift (FPS, Trimming, Audio Offset)<\/h3>\n\n\n\n
\n
\"\"<\/figure>\n<\/figure>\n\n\n\n
Subtitle drift = captions slowly desyncing from audio. Common causes:<\/p>\n\n\n\n
    \n
  1. FPS mismatch:<\/strong> SRT generated at 30fps but rendering at 25fps causes drift. Always match FPS:<\/li>\n<\/ol>\n\n\n\n
    const { fps } = useVideoConfig();\nconsole.log('FPS:', fps); \/\/ Match this to your SRT timing<\/code><\/pre>\n\n\n\n
      \n
    1. Video trimming:<\/strong> If you trimmed the start, offset caption times:<\/li>\n<\/ol>\n\n\n\n
      const offsetMs = 2000; \/\/ Trimmed 2 seconds\nconst adjusted = captions.map(cap => ({\n  ...cap,\n  startMs: cap.startMs - offsetMs,\n  endMs: cap.endMs - offsetMs,\n}));<\/code><\/pre>\n\n\n\n
        \n
      1. Audio resampling:<\/strong> Re-encoding audio can change duration slightly, causing long-term drift.<\/li>\n<\/ol>\n\n\n\n
        Test:<\/strong> Render a 30-second segment and check if captions at the end are still synced.<\/p>\n\n\n\n
        TikTok-Style Highlight Recipe (Word Timing, Emphasis, Bounce)<\/h2>\n\n\n\n
        Okay, here’s the fun part \u2014 making captions that actually look like TikTok.<\/p>\n\n\n\n
        The key is Remotion’s createTikTokStyleCaptions() function<\/code>, which breaks caption lines into “pages” with individual word timings.<\/p>\n\n\n\n
        Step 1: Convert Captions to Pages<\/h3>\n\n\n\n
        import { createTikTokStyleCaptions } from '@remotion\/captions';\n\nconst { pages } = createTikTokStyleCaptions({\n  captions,\n  combineTokensWithinMilliseconds: 1200,\n});<\/code><\/pre>\n\n\n\n
        The combineTokensWithinMilliseconds<\/code> parameter controls how many words appear per page:<\/p>\n\n\n\n