Highlight Box

$ pnpm dlx shadcn@latest add @remocn/caption-highlight-box

Usage

CaptionHighlightBox shows the whole page and moves a rounded box behind the word being spoken. When the voice reaches the next word the box slides and resizes onto it instead of popping, so the eye follows one shape across the line. The text sitting on the box switches to activeColor as the box arrives.

It renders only the text block, so place it inside your own AbsoluteFill. See Positioning for safe placements and Get a transcript for producing captions.json.

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