# Strikethrough Replace
URL: https://remocn.dev/docs/typography/strikethrough-replace

Draws a strike line through the old text, then fades the new text in beneath it for an editorial correction

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

## Installation

```bash
npx shadcn@latest add @remocn/strikethrough-replace
```

## Usage

Keep `from` and `to` short. The strike reads as a deliberate edit, and a long struck-out line is
hard to parse at speed.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StrikethroughReplace } from "@/components/remocn/strikethrough-replace";

const StrikethroughScene = () => (
  <StrikethroughReplace from="Manual video editing" to="One-click export" fontSize={48} />
);

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

The line draws across `from` first, then `to` fades in beneath it — so the composition needs room
for both phases. Under-budgeting cuts the reveal.

### With Backdrop

The component renders transparent — supply the background via `Backdrop`.

```tsx
import { Composition } from "remotion";
import { Backdrop } from "@/components/remocn/backdrop";
import { StrikethroughReplace } from "@/components/remocn/strikethrough-replace";

const StrikethroughScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <StrikethroughReplace from="$99 / month" to="$29 / month" lineColor="#ff5e3a" />
  </Backdrop>
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` (required) | `string` | — | The old text — the line is drawn across this string. |
| `to` (required) | `string` | — | The replacement text, revealed beneath the struck-out line. |
| `lineColor` | `string` | `"#ff5e3a"` | Color of the strike line. Defaults to a red-orange for maximum contrast against the text. |
| `fontSize` | `number` | `48` | Font size in pixels, applied to both strings. |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color). |
| `fontWeight` | `number` | `600` | CSS font-weight. |
| `speed` | `number` | `1` | Time multiplier applied as frame × speed. |
| `className` | `string` | — | Optional className passed to the root element. |

## Use when
- Showing a problem being replaced by a solution — the strike says you are crossing this out on purpose
- A pricing or comparison beat needs the old value visibly struck out before the new one appears
- You want editorial correction grammar — old thinking struck through, new thinking revealed below

## Don't use when
- There is no old text to cross out and you just need an entrance — use `staggered-fade-up` or `soft-blur-in`
- The swap should feel smooth and spatial rather than editorial — use `shared-axis-y` or `shared-axis-z`
- Both strings are long — the struck line gets hard to read and the full animation runs 120 frames