Knockout

A solid plate with the words cut clean through it, each word punching out the moment it is spoken so the footage shows through the letters

Installation

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

tsx

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

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`.
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. Heavy weights cut wider holes and show more of the footage.
plateColor	string"#ffffff" Colour of the plate the words are cut out of.
upcomingOpacity	number0.15 How far a word the voice has not reached yet already shows through, from 0 (solid plate) to 1 (fully cut).
radius	number0.16 Corner radius of the plate, in em.
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—
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. Heavy weights cut wider holes and show more of the footage.
Default800
plateColorstring
Colour of the plate the words are cut out of.
Default"#ffffff"
upcomingOpacitynumber
How far a word the voice has not reached yet already shows through, from 0 (solid plate) to 1 (fully cut).
Default0.15
radiusnumber
Corner radius of the plate, in em.
Default0.16
classNamestring
Classes for the text block — width, font family, `uppercase`.
Default—