Word Pop
One large word at a time, each popping in on a spring the moment it is spoken
Installation
$ pnpm dlx shadcn@latest add @remocn/caption-word-popUsage
CaptionWordPop puts one word on screen at a time. Each word pops in from
popScale on a spring with a small overshoot and is replaced the moment the
next word is spoken. After the last word of a sentence it holds, then fades out
instead of hanging through the pause.
It renders only the text block. One-word captions read best in the middle of the
frame, where the eye already is — see Positioning
for the centred recipe and Get a transcript
for producing captions.json.
import { AbsoluteFill } from "remotion";
import { CaptionWordPop } from "@/components/remocn/caption-word-pop";
import captions from "./captions.json";
export const MyScene = () => (
<AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
<CaptionWordPop captions={captions} />
</AbsoluteFill>
);Props
| Prop | Type | Default | Description |
|---|---|---|---|
captions | Caption[] | — | The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`. |
combineTokensWithinMilliseconds | number | 0 | How much speech one page may span. At 0 every word is its own page; raise it to pop two or three short words in together. |
holdMs | number | 600 | How long a word stays after it ends when the next word is not already due. It fades out at the end of the hold instead of hanging through the pause. |
fontSize | number | 96 | Font size in pixels. |
fontWeight | number | 800 | Font weight. The font itself is inherited. |
color | string | "#ffffff" | Text colour. |
popScale | number | 0.6 | The scale each word starts from before the spring carries it to full size. |
shadow | boolean | true | A tight text shadow that keeps the caption legible over bright footage. |
className | string | — | Classes for the text block — width, font family, `uppercase`. |