Redline Measure

$ pnpm dlx shadcn@latest add @remocn/redline-measure

Usage

RedlineMeasure is a full-frame scene. It dims the UI slightly, then draws each measurement in turn: the end ticks snap in, the line grows out from its middle and the value pops on. Radius marks sweep a quarter arc into a corner.

import { RedlineMeasure } from "@/components/remocn/redline-measure";
 
export const Spec = () => <RedlineMeasure />;

Without children it measures a demo calendar dashboard. To measure your own UI, pass it as children laid out in a 1280×720 frame, and list the marks in frame pixels. With children and no measures, nothing is drawn.

import { Img, staticFile } from "remotion";
import { RedlineMeasure } from "@/components/remocn/redline-measure";
 
export const Spec = () => (
  <RedlineMeasure
    measures={[
      { from: [120, 200], to: [144, 200], label: "24", side: "above" },
      { from: [300, 160], to: [300, 192], label: "h 32", side: "right" },
    ]}
    radii={[{ x: 120, y: 180, r: 12, label: "radius 12" }]}
  >
    <Img src={staticFile("dashboard.png")} style={{ width: 1280, height: 720 }} />
  </RedlineMeasure>
);

A measure is horizontal when its points differ more in x than in y. side places the value: above, below, left, right or center. By default a horizontal value sits above its line and a vertical one to the left.

Timing

At 30 fps and speed={1}:

Radius marks follow the measures in the same rhythm. redlineMeasureLength is 63 with the default demo marks. After that the marks hold still. speed scales the whole timeline.