Area Compare

Two discs compare bundle sizes while 14x smaller settles in big type

Installation

$ pnpm dlx shadcn@latest add @remocn/area-compare

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AreaCompare } from "@/components/remocn/area-compare";
 
const AreaCompareScene = () => (
  <AreaCompare
    label="Bundle size"
    beforeValue={1200}
    afterValue={84}
    unit="KB"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="AreaCompare"
    component={AreaCompareScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Two discs, sized by area, start at the same scale, then the second shrinks to its true ratio while a tag appears and the multiplier settles in large type with the verdict word. Pass before and after names, beforeValue and afterValue with a unit, and set shape to circle or square. Ships dark and light via theme.

Props11

Prop	Type	Default
label	string"Bundle size" Small heading naming what is measured.
before	string"Before" Name of the original item.
after	string"remocn" Name of the improved item.
beforeValue	number1200 Original measurement.
afterValue	number84 Improved measurement; the ratio sets the multiplier.
unit	string"KB" Unit appended to the values.
verdict	string"smaller" Word after the multiplier, such as smaller.
shape	"circle" \| "square""circle" Draw the two items as circles or squares.
accent	string"#3B5BFD" Accent color for the hero element.
theme	"dark" \| "light""dark" Dark or light palette.
speed	number1 Playback multiplier.

labelstring
Small heading naming what is measured.
Default"Bundle size"
beforestring
Name of the original item.
Default"Before"
afterstring
Name of the improved item.
Default"remocn"
beforeValuenumber
Original measurement.
Default1200
afterValuenumber
Improved measurement; the ratio sets the multiplier.
Default84
unitstring
Unit appended to the values.
Default"KB"
verdictstring
Word after the multiplier, such as smaller.
Default"smaller"
shape"circle" | "square"
Draw the two items as circles or squares.
Default"circle"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1