# Typo Fix
URL: https://remocn.dev/docs/typography/typo-fix

A misspelled word is caught and corrected in place inside a short line.

- Install: `npx shadcn@latest add @remocn/typo-fix`
- Vibe: clean
- Natural length: 80f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/typo-fix
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TypoFix } from "@/components/remocn/typo-fix";

const TypoFixScene = () => (
  <TypoFix wrong="Lanuch" correct="Launch" after="day" />
);

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

The `wrong` word appears in a short line, gets flagged, and is corrected to `correct` in place. Pass `wrong`, `correct` and surrounding `before` and `after` text. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `wrong` | `string` | `"Lanuch"` | Misspelled word shown first. |
| `correct` | `string` | `"Launch"` | Correct spelling it becomes. |
| `before` | `string` | `""` | Text before the word. |
| `after` | `string` | `"day"` | Text after the word. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A quick-edit demo showing how easy a copy fix is.
- A joke or humanizing beat about a typo caught before the launch.
- A short proof that text changes are a one-line prop edit.

## Don't use when
- Whole phrases should be selected and rewritten — use `select-replace`.
- You want to show a code-style change — use `diff-swap`.
- A new word should be added to the sentence — use `word-insert`.