# Split Flap
URL: https://remocn.dev/docs/captions/components/caption-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

- Install: `npx shadcn@latest add @remocn/caption-split-flap`
- Vibe: tech
- Natural length: transcript-driven

## Installation

```bash
npx 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](/docs/captions/getting-started/positioning) for safe placements
and [Get a transcript](/docs/captions/getting-started/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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1000` | 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` | `number` | `600` | 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` | `number` | `56` | Font size in pixels. Tiles are sized from it, so it sets the size of the whole board. |
| `fontWeight` | `number` | `800` | 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`. |

## Use when
- A launch, travel or tech video wants a mechanical, announcement-board feel — each word arrives as tiles flipping into place on cue.
- The phrase should be readable as a board from the start — blank tiles hold the place of every upcoming word, so the layout never moves.

## Don't use when
- You want letters to decode in place without tiles or a board look — use `caption-scramble`.
- The captions sit over a busy talking head for a long video and should stay quiet — use `caption-subtitle`.
- The text is scripted on-screen copy with no voiceover — use `typewriter` or `word-stream`.