Handwrite

Each word is inked in by hand from left to right at the pace it is spoken, every word sitting at its own slight angle

Installation

$ pnpm dlx shadcn@latest add @remocn/caption-handwrite

Usage

CaptionHandwrite takes a timed transcript and renders only the text block, so place it inside your own AbsoluteFill. Each word stays invisible, with its space already reserved, until it is spoken. Then ink runs across it from left to right behind a soft leading edge, taking as long as the word itself, with a 200 ms floor so short words are still written rather than flashed. Every word gets its own small tilt and baseline lift, and every letter its own slant, so the line never looks set in type. wobble scales all of that, and 0 writes perfectly straight.

The effect reads best in a handwriting face. The font is inherited, so load one with @remotion/google-fonts and set it on a wrapper. See Positioning for safe placements and Get a transcript for producing captions.json.

tsx

import { loadFont } from "@remotion/google-fonts/Caveat";
import { AbsoluteFill } from "remotion";
import { CaptionHandwrite } from "@/components/remocn/caption-handwrite";
import captions from "./captions.json";
 
const { fontFamily } = loadFont("normal", {
  subsets: ["latin"],
  weights: ["700"],
});
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
      fontFamily,
    }}
  >
    <CaptionHandwrite captions={captions} fontSize={80} fontWeight={700} />
  </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`.
wobble	number1 Scales the per-word tilt and baseline lift and the per-letter slant. `0` is straight, `2` is a loose scrawl.
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" Ink colour.
shadow	booleantrue A tight text shadow that keeps the writing 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—
wobblenumber
Scales the per-word tilt and baseline lift and the per-letter slant. `0` is straight, `2` is a loose scrawl.
Default1
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).
Default1200
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.
Default600
fontSizenumber
Font size in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Ink colour.
Default"#ffffff"
shadowboolean
A tight text shadow that keeps the writing legible over bright footage.
Defaulttrue
classNamestring
Classes for the text block — width, font family, `uppercase`.
Default—