Design Audit

A full design review in one scene, from red redlines and issue boxes through a scan that ships the fix to a close-up with specs and tokens

Installation

$ pnpm dlx shadcn@latest add @remocn/design-audit

Usage

DesignAudit chains the design-review beats into one scene. The screen rises in and red redlines and issue boxes draw over the old build. A scan band sweeps down and leaves the fixed build with blue redlines. The camera then pushes into one element, which gets specs and token tags, and pulls back while layout guides draw over the grid. A step bar on top lights Audit, Layout, Components and Tokens in turn, and the version chip flips when the scan passes it.

tsx

import { DesignAudit } from "@/components/remocn/design-audit";
 
export const Review = () => <DesignAudit />;

Without before and after it plays on the demo dashboard. With your own frames, pass the marks for each beat in frame pixels. Each beat you leave out is skipped, and focus: null skips the camera push.

tsx

import { Img, staticFile } from "remotion";
import { DesignAudit } from "@/components/remocn/design-audit";
 
export const Review = () => (
  <DesignAudit
    before={<Img src={staticFile("v1.png")} />}
    after={<Img src={staticFile("v2.png")} />}
    beforeMarks={{ measures: [{ from: [320, 200], to: [340, 200], label: "20" }] }}
    issues={[{ rect: { x: 320, y: 180, w: 200, h: 40 }, note: "13 → 14" }]}
    afterMarks={{ measures: [{ from: [320, 200], to: [344, 200], label: "24" }] }}
    focus={{
      rect: { x: 320, y: 180, w: 200, h: 92 },
      tokens: [{ anchor: [340, 250], at: [380, 320], label: "bg/success", swatch: "#1FC16B" }],
    }}
    guides={null}
    brand="Acme"
    versions={["v1", "v2"]}
  />
);

The marks use the shapes from Redline Measure, Audit Boxes, Token Tags and Layout Guides. Set brand="" to hide the top bar.

Timing

At 30 fps and speed={1}:

Frames	Motion
0–18	The screen rises in
14–60	Red redlines draw
34–80	Issue boxes trace and get their notes
72–136	The scan band sweeps down; the chip flips; Layout lights
146–156	The blue redlines fade
156–178	The camera pushes into `focus`; Components lights
180–210	Close-up specs draw
208–250	Token tags draw; Tokens lights
252–274	The camera pulls back
278–332	Layout guides draw

designAuditLength is 332. speed scales the whole timeline.

Props15

Prop	Type	Default
before	React.ReactNode— UI before the fix, 1280×720. Defaults to the demo dashboard
after	React.ReactNode— The fixed UI with the same layout
beforeMarks	{ measures?: Measure[]; radii?: RadiusMark[] }— Red redlines over before
issues	Issue[]— Off-spec elements boxed on before
afterMarks	{ measures?: Measure[]; radii?: RadiusMark[] }— Blue redlines over after, shown once the scan lands
focus	{ rect: Rect; measures?: Measure[]; radii?: RadiusMark[]; tokens?: TokenSpec[] } \| null— Element the camera pushes into, with its specs and tokens; null skips the push
guides	GuideSpec \| null— Guides drawn after the camera pulls back; null skips them
steps	string[]["Audit", "Layout", "Components", "Tokens"] Four step names lit in turn
brand	string"Synergy" Name beside the version chip; empty hides the top bar
versions	[string, string]["v1.0", "v2.0"] Chip text before and after the scan
auditColor	string"#FB3748" Red marks and first step color
fixColor	string"#335CFF" Blue marks, guides and lit step color
scanColor	string"#7D52F4" Scan band color
background	string"#EDEDEF" Stage color
speed	number1 Playback multiplier

beforeReact.ReactNode
UI before the fix, 1280×720. Defaults to the demo dashboard
afterReact.ReactNode
The fixed UI with the same layout
beforeMarks{ measures?: Measure[]; radii?: RadiusMark[] }
Red redlines over before
issuesIssue[]
Off-spec elements boxed on before
afterMarks{ measures?: Measure[]; radii?: RadiusMark[] }
Blue redlines over after, shown once the scan lands
focus{ rect: Rect; measures?: Measure[]; radii?: RadiusMark[]; tokens?: TokenSpec[] } | null
Element the camera pushes into, with its specs and tokens; null skips the push
guidesGuideSpec | null
Guides drawn after the camera pulls back; null skips them
stepsstring[]
Four step names lit in turn
Default["Audit", "Layout", "Components", "Tokens"]
brandstring
Name beside the version chip; empty hides the top bar
Default"Synergy"
versions[string, string]
Chip text before and after the scan
Default["v1.0", "v2.0"]
auditColorstring
Red marks and first step color
Default"#FB3748"
fixColorstring
Blue marks, guides and lit step color
Default"#335CFF"
scanColorstring
Scan band color
Default"#7D52F4"
backgroundstring
Stage color
Default"#EDEDEF"
speednumber
Playback multiplier
Default1