Weight Cut

A heavy figure counts down to a small value as its strokes thin to a light weight.

Installation

$ pnpm dlx shadcn@latest add @remocn/weight-cut

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WeightCut } from "@/components/remocn/weight-cut";
 
const WeightCutScene = () => <WeightCut value={6.8} from={94} suffix="KB" eyebrow="Per scene, gzipped" label="Lighter than your logo file." />;
 
export const RemotionRoot = () => (
  <Composition
    id="WeightCut"
    component={WeightCutScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A heavy figure counts down from from to value while its stroke weight thins from bold to light, and a small unit suffix sits beside it. An eyebrow and a caption stack in a column next to the figure. Pass value, from, suffix, eyebrow and label; lightWeight sets the final stroke weight and accent colors the suffix. It ships light and dark through theme.

Props12

Prop	Type	Default
value	number6.8 The number the count lands on.
from	number94 Starting number; the figure is heaviest here.
decimals	number1 Decimal places shown.
prefix	string"" Text before the number.
suffix	string"KB" Small unit text beside the figure.
eyebrow	string"Per scene, gzipped" Small line above the caption.
label	string"Lighter than your logo file." Caption in the side column.
lightWeight	number100 Final stroke weight, snapped to 100 through 500.
accent	string— Color of the suffix; defaults to the theme accent.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuenumber
The number the count lands on.
Default6.8
fromnumber
Starting number; the figure is heaviest here.
Default94
decimalsnumber
Decimal places shown.
Default1
prefixstring
Text before the number.
Default""
suffixstring
Small unit text beside the figure.
Default"KB"
eyebrowstring
Small line above the caption.
Default"Per scene, gzipped"
labelstring
Caption in the side column.
Default"Lighter than your logo file."
lightWeightnumber
Final stroke weight, snapped to 100 through 500.
Default100
accentstring
Color of the suffix; defaults to the theme accent.
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"