Wireframe to Final

A gray blueprint wireframe of a dashboard is drawn with measurement lines, then a sweep fills in the finished UI.

Installation

$ pnpm dlx shadcn@latest add @remocn/wireframe-to-final

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WireframeToFinal } from "@/components/remocn/wireframe-to-final";
 
const WireframeToFinalScene = () => (
  <WireframeToFinal
    captions={["Idea", "Product"]}
    measurements={["1440", "900", "288"]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WireframeToFinal"
    component={WireframeToFinalScene}
    durationInFrames={225}
    fps={30}
    width={1280}
    height={720}
  />
);

A blueprint-style stage draws the outline, dimension lines and gray wireframe blocks of a dashboard, then a light sweep fills it into the finished product UI while the caption swaps from captions[0] to captions[1]. Pass src with a screenshot of your product (a built-in dashboard shows if omitted), captions and measurements. Ships light and dark.

Props6

Prop	Type	Default
src	string— Final screenshot; a built-in dashboard shows when omitted
theme	"light" \| "dark""light" Light or dark palette
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
captions	[string, string]["Idea", "Product"] Captions before and after the fill; empty strings hide them
measurements	[string, string, string]["1440", "900", "288"] Numbers on the measurement lines: width, height, sidebar

srcstring
Final screenshot; a built-in dashboard shows when omitted
theme"light" | "dark"
Light or dark palette
Default"light"
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
captions[string, string]
Captions before and after the fill; empty strings hide them
Default["Idea", "Product"]
measurements[string, string, string]
Numbers on the measurement lines: width, height, sidebar
Default["1440", "900", "288"]