Cube

Each new phrase turns into view as the next face of a 3D cube, the previous phrase rotating up and away on a horizontal hinge

Installation

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

tsx

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>
);

Props10

Prop	Type	Default
captions	Caption[]— The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`.
combineTokensWithinMilliseconds	number800 How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
holdMs	number600 How long a page stays after its last word when the next page is not already due. It turns away at the end of the hold instead of hanging through the pause.
fontSize	number64 Font size in pixels.
fontWeight	number800 Font weight. The font itself is inherited.
color	string"#ffffff" Text colour.
tintActive	booleanfalse Colour the word being spoken with `activeColor`.
activeColor	string"#facc15" Colour of the spoken word when `tintActive` is on.
shadow	booleantrue A tight text shadow that keeps the caption legible over bright footage.
className	string— Classes for the text block — font family, `uppercase`.

captionsCaption[]
The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`.
Default—
combineTokensWithinMillisecondsnumber
How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum).
Default800
holdMsnumber
How long a page stays after its last word when the next page is not already due. It turns away at the end of the hold instead of hanging through the pause.
Default600
fontSizenumber
Font size in pixels.
Default64
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Text colour.
Default"#ffffff"
tintActiveboolean
Colour the word being spoken with `activeColor`.
Defaultfalse
activeColorstring
Colour of the spoken word when `tintActive` is on.
Default"#facc15"
shadowboolean
A tight text shadow that keeps the caption legible over bright footage.
Defaulttrue
classNamestring
Classes for the text block — font family, `uppercase`.
Default—