Redact

The whole phrase starts blacked out like a declassified file, and each bar pulls away the moment its word is spoken

Installation

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

Usage

CaptionRedact takes a timed transcript and renders only the text block, so place it inside your own AbsoluteFill. When a page appears, every word is hidden under a solid bar sized to it. As each word is spoken its bar retracts from the left edge toward the right, taking as long as the word itself with a 180 ms floor, and the text underneath is uncovered behind it. Bars for words the voice has not reached stay in place, so the page reads like a document being declassified line by line. See Positioning for safe placements and Get a transcript for producing captions.json.

tsx

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

The bars are opaque on purpose, so they read over any footage. On very dark footage, set barColor to a light value so the redaction stays visible.

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`.
barColor	string"#0a0a0a" Colour of the redaction bars.
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" Colour of the uncovered words.
shadow	booleantrue A tight text shadow that keeps uncovered words 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—
barColorstring
Colour of the redaction bars.
Default"#0a0a0a"
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
Colour of the uncovered words.
Default"#ffffff"
shadowboolean
A tight text shadow that keeps uncovered words legible over bright footage.
Defaulttrue
classNamestring
Classes for the text block — width, font family, `uppercase`.
Default—