Slot

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

Usage

CaptionSlot moves at the page level, not the word level. The caption sits in a window exactly one line tall: when the next phrase starts, it rolls up into the window while the previous phrase rolls out the top, like a slot-machine reel. After a silence the line rolls out upward on its own and the next one rolls in from below.

The line never wraps, so keep pages short. The default combineTokensWithinMilliseconds of 800 gives three or four words per page; raise it only if your font and frame still fit the longest phrase on one line.

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