# Block Swap
URL: https://remocn.dev/docs/typography/block-swap

A solid block wipes over each line and the next line replaces it, ending with a highlighted word on a pill.

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

## Installation

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

## Usage

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

const BlockSwapScene = () => (
  <BlockSwap
    lines={["Pick the beats you need.", "Render the launch."]}
    highlight="launch"
    accent="#3B5BFD"
  />
);

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

Each word of the first line is covered by a block that morphs into the next line, then uncovers the new words. The last line keeps `highlight` on a gradient pill. Pass `lines` as an array of sentences and `highlight` as the word to call out; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `DEFAULT_LINES` | Sentences shown in order; each one overwrites the previous |
| `highlight` | `string` | `"launch"` | Word in the last line that lands on the gradient pill |
| `accent` | `string` | `"#3B5BFD"` | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A beat that rewrites one statement into another, such as a problem line replaced by the answer.
- A two-step message where the final line needs one word called out on a gradient pill.

## Don't use when
- You only have a single line to reveal - use `mask-reveal-up`.
- You want the old text struck out and replaced in place - use `strikethrough-replace`.
- You need a soft crossfade between lines rather than a block wipe - use `per-word-crossfade`.