Compact Stat

A long number retracts into a compact figure with a gradient K, M or B suffix, then grows.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CompactStat } from "@/components/remocn/compact-stat";
 
const CompactStatScene = () => <CompactStat value={1200000} decimals={1} label="frames rendered with remocn" />;
 
export const RemotionRoot = () => (
  <Composition
    id="CompactStat"
    component={CompactStatScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The full number rises in digit by digit, then its trailing digits retract on a reel and a magnitude suffix (K, M, B or T) springs in; the shortened figure scales up in a gradient with a soft ground glow, under a caption. Pass value as the full number, with decimals, prefix and label; the suffix is picked automatically unless you pass suffix. It ships light and dark through theme.

Props9

Prop	Type	Default
value	number1200000 The full number; it is shortened with a K, M, B or T suffix.
decimals	number1 Decimal places on the shortened figure.
suffix	string— Overrides the automatic magnitude suffix.
prefix	string"" Text before the number.
label	string"frames rendered with remocn" Caption under the figure.
accent	string"#3B5BFD" Color of the gradient suffix and glow.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuenumber
The full number; it is shortened with a K, M, B or T suffix.
Default1200000
decimalsnumber
Decimal places on the shortened figure.
Default1
suffixstring
Overrides the automatic magnitude suffix.
prefixstring
Text before the number.
Default""
labelstring
Caption under the figure.
Default"frames rendered with remocn"
accentstring
Color of the gradient suffix and glow.
Default"#3B5BFD"
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"