Cut Stat

A blue bar graph wipes upward beside a big minus 44% caption, 'less time to a finished cut'

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CutStat } from "@/components/remocn/cut-stat";
 
const CutStatScene = () => (
  <CutStat
    value={44}
    label="less time to a finished cut"
    caption="vs. keyframing every scene by hand"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CutStat"
    component={CutStatScene}
    durationInFrames={115}
    fps={30}
    width={1280}
    height={720}
  />
);

A bar graph wipes up, then a cut sweeps it down with a flash as the big minus percentage words in and the caption follows. Pass value (the percent cut, 5 to 95), label for the claim, and caption for the comparison. Ships dark and light via theme.

Props12

Prop	Type	Default
value	number44 Percent cut; also sets how far the bar drops, from 5 to 95.
decimals	number0 Digits after the decimal point.
prefix	string"−" Text before the number, a minus sign by default.
suffix	string"%" Text after the number.
label	string"less time to a finished cut" Main claim shown beside the number.
caption	string"vs. keyframing every scene by hand" Small line comparing against the old way.
fromLabel	string"Before" Label on the full bar.
toLabel	string"With remocn" Label on the shortened bar.
accent	string"#3B5BFD" Accent color for the hero element.
background	string— Optional CSS background replacing the theme ground.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

valuenumber
Percent cut; also sets how far the bar drops, from 5 to 95.
Default44
decimalsnumber
Digits after the decimal point.
Default0
prefixstring
Text before the number, a minus sign by default.
Default"−"
suffixstring
Text after the number.
Default"%"
labelstring
Main claim shown beside the number.
Default"less time to a finished cut"
captionstring
Small line comparing against the old way.
Default"vs. keyframing every scene by hand"
fromLabelstring
Label on the full bar.
Default"Before"
toLabelstring
Label on the shortened bar.
Default"With remocn"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
backgroundstring
Optional CSS background replacing the theme ground.
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"