# Wireframe to Final
URL: https://remocn.dev/docs/product-scenes/wireframe-to-final

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

- Install: `npx shadcn@latest add @remocn/wireframe-to-final`
- Vibe: clean
- Natural length: 168f @ 30fps

## Installation

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

## Props

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

## Use when
- A design or no-code launch that sells idea-to-product as one transformation.
- A reveal where your real screenshot, passed as `src`, replaces a sketch.
- A before-and-after beat with a short caption pair like Idea and Product.

## Don't use when
- You want scattered windows collapsing into a tracker — use `chaos-to-order`.
- You want a loader that settles into a landing page — use `tile-snake-loader`.
- You want a camera tour of regions on a screenshot — use `screenshot-tour`.