Knockout

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

Usage

CaptionKnockout draws one solid plate behind the phrase and cuts the words out of it. A cut is a real hole: whatever sits behind the caption in your composition shows through the letters, so put it over footage, a shader or a moving background. Words the voice has not reached yet are still mostly plate; each one punches through the moment it is spoken.

The cut is an SVG mask, so any plateColor works, light or dark. The holes are drawn with the font inherited from the caption, so load your typeface the same way you would for any other caption style.

The component renders only the text block. See Positioning for safe placements and Get a transcript for producing captions.json.

import { AbsoluteFill } from "remotion";
import { CaptionKnockout } from "@/components/remocn/caption-knockout";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionKnockout captions={captions} />
  </AbsoluteFill>
);