Code Diff Wipe · remocn

A dev-block that stacks two code panes and animates a vertical wipe from left to right. The top "before" layer is masked with clip-path: inset(0 X% 0 0) where X interpolates from 0 to 100, revealing the "after" code beneath. An optional handle marker rides the wipe line.

Installation

$ pnpm dlx shadcn@latest add @remocn/code-diff-wipe

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { CodeDiffWipe } from "@/components/remocn/code-diff-wipe";

const CodeDiffWipeScene = () => (
  <CodeDiffWipe
    before={"function get() { /* old */ }"}
    after={"const get = async () => { /* new */ }"}
  />
);

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

Props

Prop	Type	Default	Description
`before`	`string`	—	Multi-line code shown on top, wiped away by the animation.
`after`	`string`	—	Multi-line code revealed underneath as the wipe progresses.
`language`	`string`	`"tsx"`	Language label shown in the pane header.
`background`	`string`	`"#0a0a0a"`	Editor background color.
`accent`	`string`	`"#0ea5e9"`	Accent color for the wipe line, handle, and "after" label.
`transitionStart`	`number`	`20`	Frame at which the wipe begins.
`transitionDuration`	`number`	`60`	Number of frames the wipe takes from 0% to 100%.
`showHandle`	`boolean`	`true`	Render a circular handle on the wipe line.
`className`	`string`	—	Optional className passed to the outer container.

Notes

GPU friendly

clip-path is composited on the GPU in modern browsers, so the wipe stays cheap even with long code blocks.

Long lines

The pane uses whiteSpace: pre and overflow: hidden, so very long lines get clipped rather than wrapped. Pre-format your snippets if you need them to fit.