Slice

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

Usage

CaptionSlice builds the phrase word by word as it is spoken. Each word is cut horizontally through the middle of the line: at the moment the voice reaches it, the top half slides in from the left and the bottom half from the right, and the two lock into one clean word. Words the voice has not reached yet keep their space, so the line never shifts as it builds.

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 { CaptionSlice } from "@/components/remocn/caption-slice";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionSlice captions={captions} />
  </AbsoluteFill>
);