Word Pop
One large word at a time, each popping in on a spring the moment it is spoken
$ 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>
);Props9
| Prop | Type | Default |
|---|---|---|
| captions | Caption[]— The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`. | |
| combineTokensWithinMilliseconds | number0 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 | number600 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 | number96 Font size in pixels. | |
| fontWeight | number800 Font weight. The font itself is inherited. | |
| color | string"#ffffff" Text colour. | |
| popScale | number0.6 The scale each word starts from before the spring carries it to full size. | |
| shadow | booleantrue A tight text shadow that keeps the caption legible over bright footage. | |
| className | string— Classes for the text block — width, font family, `uppercase`. | |
- captionsCaption[]
The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`.
Default
— - combineTokensWithinMillisecondsnumber
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.
Default
0 - holdMsnumber
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.
Default
600 - fontSizenumber
Font size in pixels.
Default
96 - fontWeightnumber
Font weight. The font itself is inherited.
Default
800 - colorstring
Text colour.
Default
"#ffffff" - popScalenumber
The scale each word starts from before the spring carries it to full size.
Default
0.6 - shadowboolean
A tight text shadow that keeps the caption legible over bright footage.
Default
true - classNamestring
Classes for the text block — width, font family, `uppercase`.
Default
—