Stamp
Plain captions where the words that matter slam down as a rubber stamp the moment they are spoken
$ pnpm dlx shadcn@latest add @remocn/caption-stampUsage
CaptionStamp takes a timed transcript and renders only the text block, so
place it inside your own AbsoluteFill. Words read as a plain caption line
until a keyword is spoken. Then the word slams down in stampColor inside a
thin stamp frame, dropping from almost twice its size in under a tenth of a
second, settling at its own slight angle and leaving a rough, speckled ink
print. Without keywords, the longest word on each page is stamped, so the
style works on a raw transcript. See
Positioning for safe placements
and Get a transcript for
producing captions.json.
import { AbsoluteFill } from "remotion";
import { CaptionStamp } from "@/components/remocn/caption-stamp";
import captions from "./captions.json";
export const MyScene = () => (
<AbsoluteFill
style={{
justifyContent: "flex-end",
alignItems: "center",
paddingBottom: 108,
paddingInline: 192,
}}
>
<CaptionStamp
captions={captions}
keywords={["thing", "lose", "three", "captions", "sound"]}
/>
</AbsoluteFill>
);Keywords match whole words, ignoring case and punctuation. The stamp frame sits over the word without taking up extra room, so the line never shifts when it lands.
Props11
| 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`. | |
| keywords | string[]— Words that get stamped. Matched per word, ignoring case and punctuation. When omitted, the longest word on each page is stamped. | |
| stampColor | string"#ef4444" Ink colour of the stamped word and its frame. | |
| texture | booleantrue Roughens the stamp edges and knocks small speckles out of the ink, like a real rubber stamp. | |
| combineTokensWithinMilliseconds | number1200 How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum). | |
| holdMs | number600 How long a page stays after its last word when the next page is not already due. It fades out at the end of the hold instead of hanging through the pause. | |
| fontSize | number64 Font size in pixels. | |
| fontWeight | number800 Font weight. The font itself is inherited. | |
| color | string"#ffffff" Colour of the words that are not stamped. | |
| shadow | booleantrue A tight text shadow that keeps the plain words 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
— - keywordsstring[]
Words that get stamped. Matched per word, ignoring case and punctuation. When omitted, the longest word on each page is stamped.
Default
— - stampColorstring
Ink colour of the stamped word and its frame.
Default
"#ef4444" - textureboolean
Roughens the stamp edges and knocks small speckles out of the ink, like a real rubber stamp.
Default
true - combineTokensWithinMillisecondsnumber
How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
Default
1200 - holdMsnumber
How long a page stays after its last word when the next page 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
64 - fontWeightnumber
Font weight. The font itself is inherited.
Default
800 - colorstring
Colour of the words that are not stamped.
Default
"#ffffff" - shadowboolean
A tight text shadow that keeps the plain words legible over bright footage.
Default
true - classNamestring
Classes for the text block — width, font family, `uppercase`.
Default
—