# Diff Swap
URL: https://remocn.dev/docs/typography/diff-swap

A code-diff style edit rewrites a before line into the after line with the changed part highlighted.

- Install: `npx shadcn@latest add @remocn/diff-swap`
- Vibe: tech
- Natural length: 102f @ 30fps

## Installation

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

## Usage

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

const DiffSwapScene = () => (
  <DiffSwap before="Keyframe every frame by hand." after="Install the scene. Edit the props." highlight="Edit the props." />
);

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

The `before` line is struck through as a deletion while the `after` line appears as an addition, with `highlight` marked in the accent color. Pass `before`, `after` and `highlight`. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Keyframe every frame by hand."` | Line shown as the removed text. |
| `after` | `string` | `"Install the scene. Edit the props."` | Line shown as the added text. |
| `highlight` | `string` | `"Edit the props."` | Part of `after` marked in the accent color. |
| `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 dev-tool beat showing the old painful way replaced by the new one.
- A changelog scene presenting one line removed and one added.
- A before-and-after claim that should look like a version-control change.

## Don't use when
- The change is a single word inside a sentence — use `strikethrough-replace`.
- Text should be selected then retyped like an editor — use `select-replace`.
- The audience is non-technical and a diff would confuse — use `layout-swap`.