# Scan Fix
URL: https://remocn.dev/docs/product-scenes/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

- Install: `npx shadcn@latest add @remocn/scan-fix`
- Vibe: clean
- Natural length: 100f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback multiplier |

## Use when
- A release should show the old build turning into the new one in a single sweep.
- A design review story needs its payoff: every flagged problem fixed at once.
- Two frames with the same layout should swap top to bottom rather than side to side.

## Don't use when
- A divider should sweep sideways across an image — use `before-after`.
- A gray wireframe should fill in with the finished UI — use `wireframe-to-final`.
- The whole review, from audit to tokens, should play as one scene — use `design-audit`.