Handwrite

$ 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.

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>
);