# Magnet Letters
URL: https://remocn.dev/docs/typography/magnet-letters

A magnet pulls a wrong word into line, then repels it, and the right word drops in.

- Install: `npx shadcn@latest add @remocn/magnet-letters`
- Vibe: playful
- Natural length: 216f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/magnet-letters
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MagnetLetters } from "@/components/remocn/magnet-letters";

const MagnetLettersScene = () => (
  <MagnetLetters before="Ship " wrongWord="someday" word="today" after="." />
);

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

A sentence settles in, a horseshoe magnet sweeps across the wrong word and lines its scattered letters up, then repels it off the line. The sentence reflows and the right word drops in letter by letter before the magnet leaves. Pass `before`, `word`, `after` and `wrongWord`. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Launch "` | Text before the word that gets swapped. Keep the trailing space. |
| `word` | `string` | `"videos"` | The right word. It drops in once the wrong one is repelled. |
| `after` | `string` | `", in code."` | Text after the swapped word. |
| `wrongWord` | `string` | `"slides"` | The wrong word the magnet pulls into line first, then repels. |
| `accent` | `string` | `"#3B5BFD"` | Magnet body, landing ticks and the right word. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A correction beat in a sentence, such as swapping one word for the better word, shown as a physical gag.
- A launch video that contrasts the old way with the new way inside a single line.
- A playful mid-video moment that rewards a slightly longer, more theatrical word swap.

## Don't use when
- The swap should be quick and quiet - use `strikethrough-replace`.
- You need several alternates cycling beside a prefix - use `inline-word-roll`.
- The change is a value or number, not a word - use `slot-machine-roll`.