Cube

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

Usage

CaptionCube moves at the page level. Every page is a face of a cube hinged along the line: when the next phrase starts, the cube turns, the old phrase rotating up and away while the new one comes round from below. After a silence the line turns away on its own and the next phrase turns in fresh. Words inside a page stay still; switch on tintActive to colour the word being spoken.

The cube turns one line, so the text never wraps. The default combineTokensWithinMilliseconds of 800 keeps pages to three or four words; raise it only if the longest phrase still fits your frame 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 { CaptionCube } from "@/components/remocn/caption-cube";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionCube captions={captions} />
  </AbsoluteFill>
);