Measure Dim

A gradient bar is measured by dimension lines as 184 fps overtakes 60 fps

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MeasureDim } from "@/components/remocn/measure-dim";
 
const MeasureDimScene = () => (
  <MeasureDim
    value="184 fps"
    before="60 fps"
    beforeLabel="Before"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MeasureDim"
    component={MeasureDimScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

A gradient bar draws in, extension lines drop and a dimension arrow counts the new value along it. A ghost bar for the previous value then appears below and gets its own dimension line. Pass value and before with their units, and label and beforeLabel to name the two bars. It ships light and dark through the theme prop.

Props8

Prop	Type	Default
subject	React.ReactNode— Optional node shown in place of the bar label, e.g. a logo.
label	string"remocn" Name shown on the hero bar.
value	string"184 fps" The new measurement with its unit, e.g. '184 fps'. The number counts up.
before	string"60 fps" The previous measurement with its unit. Leave empty to drop the ghost bar.
beforeLabel	string"Before" Name shown on the ghost bar.
accent	string"#3B5BFD" Highlight colour woven into the bar gradient.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier; 1 is the designed pace.

subjectReact.ReactNode
Optional node shown in place of the bar label, e.g. a logo.
labelstring
Name shown on the hero bar.
Default"remocn"
valuestring
The new measurement with its unit, e.g. '184 fps'. The number counts up.
Default"184 fps"
beforestring
The previous measurement with its unit. Leave empty to drop the ghost bar.
Default"60 fps"
beforeLabelstring
Name shown on the ghost bar.
Default"Before"
accentstring
Highlight colour woven into the bar gradient.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1