Scan Fix

A scan band sweeps down a screen and leaves the fixed build behind it, red redlines turning blue and the version chip flipping

Installation

$ pnpm dlx shadcn@latest add @remocn/scan-fix

Usage

ScanFix is a full-frame scene with two layers. A bright line with a soft wash behind it travels from the top of the frame to the bottom. Above the line you see after, below it before. When the line passes the version chip, the chip switches from the first version to the second.

tsx

import { ScanFix } from "@/components/remocn/scan-fix";
 
export const Ship = () => <ScanFix />;

Without props it scans the demo dashboard: the drifted v1 with red redlines and issue boxes turns into v2 with blue redlines. Pass your own frames, 1280×720 each, with the same layout so the sweep reads as a fix.

tsx

import { Img, staticFile } from "remotion";
import { ScanFix } from "@/components/remocn/scan-fix";
 
export const Ship = () => (
  <ScanFix
    before={<Img src={staticFile("v1.png")} />}
    after={<Img src={staticFile("v2.png")} />}
    brand="Acme"
    versions={["v3.2", "v4.0"]}
  />
);

Set brand="" to hide the version chip.

Timing

At 30 fps and speed={1}:

Frames	Motion
14–20	The band fades in above the frame
18–98	The band sweeps top to bottom with a cubic ease-in-out
~22	The version chip flips as the band passes it
92–100	The band fades out below the frame

scanFixLength is 100. speed scales the whole timeline.

Props9

Prop	Type	Default
before	React.ReactNode— Frame before the fix, 1280×720. Defaults to the demo dashboard with red marks
after	React.ReactNode— Frame after the fix, same size. Defaults to the fixed dashboard with blue marks
brand	string"Synergy" Name beside the version chip; empty hides the chip
versions	[string, string]["v1.0", "v2.0"] Chip text before and after the band passes
scanColor	string"#7D52F4" Band color
beforeColor	string"#FB3748" Old chip and demo redline color
afterColor	string"#335CFF" New chip and demo redline color
background	string"#EDEDEF" Stage color
speed	number1 Playback multiplier

beforeReact.ReactNode
Frame before the fix, 1280×720. Defaults to the demo dashboard with red marks
afterReact.ReactNode
Frame after the fix, same size. Defaults to the fixed dashboard with blue marks
brandstring
Name beside the version chip; empty hides the chip
Default"Synergy"
versions[string, string]
Chip text before and after the band passes
Default["v1.0", "v2.0"]
scanColorstring
Band color
Default"#7D52F4"
beforeColorstring
Old chip and demo redline color
Default"#FB3748"
afterColorstring
New chip and demo redline color
Default"#335CFF"
backgroundstring
Stage color
Default"#EDEDEF"
speednumber
Playback multiplier
Default1