Label Maker
Each phrase is punched letter by letter into a strip of embossing tape at the pace it is spoken, the tape feeding out as the words arrive
$ pnpm dlx shadcn@latest add @remocn/caption-label-makerUsage
CaptionLabelMaker takes a timed transcript and renders only the text block, so
place it inside your own AbsoluteFill. Each page is a single strip of tape,
tilted slightly. Letters are punched one by one across each word's duration,
with a small press on every letter, and the tape grows from left to right with
them. The space for the whole label is reserved when the page starts, so the
strip never shifts. See Positioning
for safe placements and Get a transcript
for producing captions.json.
import { AbsoluteFill } from "remotion";
import { CaptionLabelMaker } from "@/components/remocn/caption-label-maker";
import captions from "./captions.json";
export const MyScene = () => (
<AbsoluteFill
style={{
justifyContent: "flex-end",
alignItems: "center",
paddingBottom: 108,
paddingInline: 192,
}}
>
<CaptionLabelMaker captions={captions} />
</AbsoluteFill>
);A label never wraps, so the default page window is shorter than other styles.
Embossing tape reads best with a heavy, slightly condensed font and
className="uppercase".
| 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`. |
tapeColor | string | "#18181b" | Colour of the embossing tape. |
combineTokensWithinMilliseconds | number | 1000 | 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 | number | 600 | 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 | number | 64 | Font size in pixels. |
fontWeight | number | 800 | Font weight. The font itself is inherited. |
color | string | "#ffffff" | Colour of the embossed letters. |
className | string | — | Classes for the text block — font family, `uppercase`. |