# Blueprint
URL: https://remocn.dev/docs/graphic-looks/blueprint

A product wipes left to right into a technical drawing with a blueprint grid, white linework, dimension lines and a red callout

- Install: `npx shadcn@latest add @remocn/blueprint`
- Vibe: tech
- Natural length: 45f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/blueprint
```

## Usage

`Blueprint` is a full-frame scene. It opens on the product over a plain ground.
A glowing scan edge wipes left to right and leaves a technical drawing behind
it: a blue sheet with a minor and major grid, the product traced in white
lines, dashed center lines, extension and dimension lines with architectural
ticks, size labels, a title block, and a red callout ring with a lettered
bubble.

```tsx
import { Blueprint } from "@/components/remocn/blueprint";

export const Spec = () => <Blueprint />;
```

Without children it draws a red phone-shaped device with a sensor dot. Pass
your product as children to convert it instead. The children are centered at
47% across and 46% down the frame. Behind the wipe, an SVG filter turns them
into linework: their silhouette edge plus the edges of their dark details.

```tsx
import { Img, staticFile } from "remotion";
import { Blueprint } from "@/components/remocn/blueprint";

export const Speaker = () => (
  <Blueprint
    box={[0.22, 0.56]}
    calloutAt={[0.5, 0.2]}
    labels={{
      width: "98 mm",
      height: "203 mm",
      callout: "TWEETER",
      title: "DWG S-02  SCALE 1:2",
    }}
  >
    <Img src={staticFile("speaker.png")} style={{ height: 400 }} />
  </Blueprint>
);
```

The dimension lines measure `box`, not your children. `box` is the measured
rectangle as fractions of the frame width and height, centered on the same
point as the children, so size it to match the product. `calloutAt` places the
callout ring as fractions of that box. The label and bubble go to the left of
the product when the callout text fits there, and above it otherwise.

## Timing

At 30 fps and `speed={1}`:

| Frames | Motion |
| --- | --- |
| 6–24 | The scan edge wipes left to right and lays down the blue grid |
| 8–28 | The product's linework draws in |
| 22–28 | Extension lines grow out from the box |
| 24–32 | Dimension lines grow from their centers; the ticks land at the end |
| 30–36 | Size labels and the title block fade in |
| 32–40 | The callout ring and leader line draw |
| 36–42 | The callout bubble pops with an overshoot |
| 38–44 | The callout text fades in |

`blueprintLength` is 45. After that the drawing holds still. `speed` scales the
whole timeline.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `children` | `React.ReactNode` | — | Product to convert; its silhouette and dark details become white linework. Without it a red device is drawn |
| `box` | `[number, number]` | `[0.17, 0.6]` | Measured box around the product as fractions of the frame [width, height]; the dimension lines measure this box |
| `calloutAt` | `[number, number]` | `[0.5, 0.11]` | Point the callout ring marks, as fractions of the box [x, y] |
| `labels` | `{ width?: string; height?: string; callout?: string; title?: string }` | `{ width: "71.6 mm", height: "147.5 mm", callout: "SENSOR", title: "DWG A-01  SCALE 1:1" }` | Dimension labels, callout text and title block; missing keys keep their defaults |
| `blueprintColor` | `string` | `"#173C8F"` | Blueprint sheet color |
| `lineColor` | `string` | `"#FFFFFF"` | Linework, grid, labels and scan edge color |
| `calloutColor` | `string` | `"#E5322D"` | Callout ring, leader and bubble color |
| `background` | `string` | `"#FFFFFF"` | Ground behind the product before the wipe |
| `productColor` | `string` | `"#E5322D"` | Color of the default device; ignored with children |
| `speed` | `number` | `1` | Playback multiplier |

## Use when
- A hardware or product launch should show the object as an engineering drawing: measured, labelled and precise.
- One feature of the product deserves a callout, like a sensor, a port or a button.
- The scene should switch from a glossy product shot to a technical one in a single readable move.

## Don't use when
- The product should come apart into labelled layers instead of being measured — use `exploded-view`.
- The reveal should show what is inside the device rather than its outline — use `x-ray-scan`.
- The subject is a word whose outlines should draw themselves — use `outline-trace`.