Split Flap

Every letter sits on its own flap tile and clatters through a few characters before landing the moment the word is spoken, like a station departure board

Installation

$ pnpm dlx shadcn@latest add @remocn/caption-split-flap

Usage

CaptionSplitFlap takes a timed transcript and renders only the text block, so place it inside your own AbsoluteFill. The page appears as a row of blank tiles, one per letter. When a word is spoken, its tiles fold through a few random characters from left to right and settle on the real letters. Spaces stay gaps, not tiles, and long pages wrap only between words. The tiles are the legibility treatment, so there is no shadow to toggle. See Positioning for safe placements and Get a transcript for producing captions.json.

tsx

import { AbsoluteFill } from "remotion";
import { CaptionSplitFlap } from "@/components/remocn/caption-split-flap";
import captions from "./captions.json";
 
export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 154,
    }}
  >
    <CaptionSplitFlap captions={captions} />
  </AbsoluteFill>
);

Tiles are a fixed width, so a board row grows with the letter count. The default page window is shorter than other styles to keep a page on one row; lower fontSize or combineTokensWithinMilliseconds if your pages wrap.

Props8

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`.
tileColor	string"#111111" Colour of the flap tiles behind every letter.
combineTokensWithinMilliseconds	number1000 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 fades out at the end of the hold instead of hanging through the pause.
fontSize	number56 Font size in pixels. Tiles are sized from it, so it sets the size of the whole board.
fontWeight	number800 Font weight. The font itself is inherited.
color	string"#ffffff" Colour of the letters on the tiles.
className	string— Classes for the text block — width, 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—
tileColorstring
Colour of the flap tiles behind every letter.
Default"#111111"
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).
Default1000
holdMsnumber
How long a page stays after its last word when the next page is not already due. It fades out at the end of the hold instead of hanging through the pause.
Default600
fontSizenumber
Font size in pixels. Tiles are sized from it, so it sets the size of the whole board.
Default56
fontWeightnumber
Font weight. The font itself is inherited.
Default800
colorstring
Colour of the letters on the tiles.
Default"#ffffff"
classNamestring
Classes for the text block — width, font family, `uppercase`.
Default—