Redact

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

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.