Rise
Each word slides up out of a mask at its baseline the moment it is spoken, with no bounce and no scale
Installation
$ pnpm dlx shadcn@latest add @remocn/caption-riseUsage
CaptionRise takes a timed transcript and renders only the text block, so
place it inside your own AbsoluteFill. Every word sits in its own mask and
rises into place from below its baseline at its own start time. The space for
the whole phrase is reserved from the first word, so the line never reflows as
it builds. See Positioning for
safe placements and Get a transcript
for producing captions.json.
import { AbsoluteFill } from "remotion";
import { CaptionRise } from "@/components/remocn/caption-rise";
import captions from "./captions.json";
export const MyScene = () => (
<AbsoluteFill
style={{
justifyContent: "flex-end",
alignItems: "center",
paddingBottom: 108,
paddingInline: 192,
}}
>
<CaptionRise 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 | 1200 | 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" | Text colour. |
shadow | boolean | true | A tight text shadow that keeps the caption legible over bright footage. It sits inside the word mask, so it is clipped with the word while it rises. |
className | string | — | Classes for the text block — width, font family, `uppercase`. |