Blueprint

$ pnpm dlx 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.

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.

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}:

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