# Layout Swap
URL: https://remocn.dev/docs/typography/layout-swap

Headlines swap by shifting layout, each new line growing out of the one before.

- Install: `npx shadcn@latest add @remocn/layout-swap`
- Vibe: clean
- Natural length: 132f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/layout-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LayoutSwap } from "@/components/remocn/layout-swap";

const LayoutSwapScene = () => (
  <LayoutSwap headlines={["Animations.", "Animations, transitions, backgrounds."]} highlight="backgrounds." align="left" />
);

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

Each headline in `headlines` replaces the last by sliding its shared words into the new layout, and the `highlight` phrase lands in the accent color. Pass `headlines` and tune `hold` and `move` for pacing. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headlines` | `string[]` | — | Headlines in order; each builds on the previous. |
| `highlight` | `string` | `"ready to install."` | Phrase in the last headline lit in the accent color. |
| `align` | `"center" \| "left"` | `"center"` | Text alignment of the headline block. |
| `hold` | `number` | `28` | Frames each headline holds before moving. |
| `move` | `number` | `28` | Frames the layout shift between headlines takes. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A feature headline that builds from one noun to a full promise.
- A launch hook where each version of the sentence adds to the last.
- A multi-step message that should read as one growing sentence.

## Don't use when
- Only one word changes inside a fixed sentence — use `pinned-word`.
- The words flip order and meaning — use `turnabout`.
- You want each swap triggered by an object crossing — use `pass-swap`.