Diff Swap

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

Installation

$ pnpm dlx 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.

Props7

Prop	Type	Default
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	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

beforestring
Line shown as the removed text.
Default"Keyframe every frame by hand."
afterstring
Line shown as the added text.
Default"Install the scene. Edit the props."
highlightstring
Part of `after` marked in the accent color.
Default"Edit the props."
accentstring
Accent color override; falls back to the theme accent.
Default"#3B5BFD"
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"