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.

// 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.

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.

Shared Axis Z

Scale-based shared-axis transition for focus shifts and context depth

Short Slide Right

The whole phrase glides in from the left while words reveal in sequence through opacity