# Split Word
URL: https://remocn.dev/docs/typography/split-word

A huge word is cut open by a hairline and a second word slides into the gap.

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

## Installation

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

## Usage

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

const SplitWordScene = () => <SplitWord word="Now" insert="Available" accent="#3B5BFD" />;

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

`word` rises in letter by letter, a hairline cuts through its middle, and the two halves slide apart to open an aurora-gradient band where `insert` sits. The halves then settle back with a small offset. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"Now"` | The huge word that gets split open. |
| `insert` | `string` | `"Available"` | The word revealed inside the gap. |
| `accent` | `string` | `"#3B5BFD"` | Color of the hairline cut. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; ships both. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A 'Now Available' style reveal where a status word appears inside the headline itself.
- A premium announcement where one word is split to let a second word through a gradient sky.
- A short two-word message that should feel like the first word opens up to reveal the second.

## Don't use when
- You want a gradient slash to wipe a large title in — use `slash-wipe`.
- The words should build up one after another into a phrase — use `kinetic-center-build`.
- The reveal is plain text appearing, not a physical split — use `typewriter`.