# Beam Split
URL: https://remocn.dev/docs/typography/beam-split

A light beam cuts a bold headline in two and a serif italic phrase appears in the gap.

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

## Installation

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

## Usage

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

const BeamSplitScene = () => (
  <BeamSplit title="Ship the story" inner="with motion you own" accent="#3B5BFD" />
);

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

A bold title rises, a thin beam draws across its middle and pushes the halves apart, and the italic phrase fades in between before the gap closes again. Pass `title` and `inner` to set the two texts; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Ship the story"` | Bold headline that is split by the beam |
| `inner` | `string` | `"with motion you own"` | Serif italic phrase shown inside the opened gap |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `speed` | `number` | `1` | Playback speed multiplier |

## Use when
- A headline that sets up a punchline, where the second phrase appears inside the opened gap.
- A premium reveal that pairs a heavy sans headline with an italic aside.

## Don't use when
- There is no second phrase to place in the gap - use `blur-out-up`.
- You want a simple word-by-word entrance - use `staggered-fade-up`.
- The scene needs a swap between two lines of equal weight - use `strikethrough-replace`.