Strikethrough Replace

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

Installation

$ pnpm dlx 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>
);

Props8

Prop	Type	Default
fromrequired	string— The old text — the line is drawn across this string.
torequired	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	number48 Font size in pixels, applied to both strings.
color	string"#171717" Text color (any valid CSS color).
fontWeight	number600 CSS font-weight.
speed	number1 Time multiplier applied as frame × speed.
className	string— Optional className passed to the root element.

fromrequiredstring
The old text — the line is drawn across this string.
torequiredstring
The replacement text, revealed beneath the struck-out line.
lineColorstring
Color of the strike line. Defaults to a red-orange for maximum contrast against the text.
Default"#ff5e3a"
fontSizenumber
Font size in pixels, applied to both strings.
Default48
colorstring
Text color (any valid CSS color).
Default"#171717"
fontWeightnumber
CSS font-weight.
Default600
speednumber
Time multiplier applied as frame × speed.
Default1
classNamestring
Optional className passed to the root element.