Stamp

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

Usage

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.