Direct answer
Install the captions component, pass a transcript where each word has the frame it is said on, and choose the phrase look (a few words at a time) or the line look (a full line that fills as it is said). The captions stay inside the safe area on a soft backdrop, so they read over any picture, in vertical and landscape frames.
From transcript to captions
From transcript to captions
A timed transcript goes in, you pick a look, and the captions sit inside the safe area.
- Timed transcript: Each word with the frame it is said on.
- Pick phrase or line: A few words at a time, or a full line that fills.
- Captions in the safe area: Clear of the platform's own buttons.
Install the captions component
npx shadcn@latest add https://better-design.com/registry/video/captions.jsonGive it a timed transcript
Each word needs the frame it is said on. A speech-to-text tool that returns word timings gives you seconds; multiply by the film's frame rate.
import { Captions } from "@/components/bd-video/captions";
const transcript = [
{ word: "Ship", frame: 6 },
{ word: "a", frame: 13 },
{ word: "film", frame: 20 },
];
<Captions transcript={transcript} look="phrase" placement="lower" theme={theme} />Pick the look for the platform
- Phrase: two or three words at a time, the current word in your primary colour. It suits fast talking-head clips.
- Line: a full line that fills word by word. It suits slower narration and landscape films.
- Keep the lower placement clear of the platform's own buttons; the middle placement works over an empty background.
Steal this workflow
Run this guide in your own assistant. The prompt carries the guide link and the workflow summary, so the assistant can adapt it to your project.
Read the guide "Burned-in captions for short videos, in code" at https://better-design.com/blog/tiktok-captions-video and help me apply it to my project.
Install the captions component, pass a transcript where each word has the frame it is said on, and choose the phrase look (a few words at a time) or the line look (a full line that fills as it is said). The captions stay inside the safe area on a soft backdrop, so they read over any picture, in vertical and landscape frames.
Start by asking what I am building and which tools I use. Then walk me through the workflow step by step, adapted to my answers.Claude and ChatGPT open with the prompt filled in. Gemini copies the prompt to your clipboard first, so paste it when the app opens.
Questions
Does this work for vertical video?
Yes. The component reads the frame size and sizes the type and the line length for a vertical or a landscape frame.
Where do word timings come from?
From any transcription tool that returns per-word timestamps. Remotion's captions docs list ways to produce them.