# Split Match
URL: https://remocn.dev/docs/logo-stings/split-match

Split-flap reels lock on each word in turn until the last word merges into a large logo.

- Install: `npx shadcn@latest add @remocn/split-match`
- Vibe: premium
- Natural length: 109f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/split-match
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SplitMatch } from "@/components/remocn/split-match";

const SplitMatchScene = () => (
  <SplitMatch
    words={["build", "ship", "launch", "remocn"]}
    accent="#3B5BFD"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="SplitMatch"
    component={SplitMatchScene}
    durationInFrames={145}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Two reels slam in and lock on the first word, then step to each next word in turn until the last one, where the seam closes and the gradient floods into the large logo. Pass `words`; length grows by 25 frames per extra word, and the file exports `splitMatchDuration(wordCount)` for the composition length. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `words` | `string[]` | `["build", "ship", "launch", "remocn"]` | Words in order; the last one becomes the poster logo. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour for the mark and highlights; any CSS colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |

## Use when
- A tagline made of a few short words, like build, ship, launch, that ends on the brand.
- A feature list reduced to one word per beat before the name.
- A mechanical, split-flap feel for a developer-tool launch.

## Don't use when
- You want rapid full-frame word flashes — use `blink-cut`.
- The words should sit in indexed brackets — use `bracket-index`.
- Only one name needs to land — use `snap-click`.