Press Stat

A monospace caption presses out and a large figure counts up beside it to a percentage.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PressStat } from "@/components/remocn/press-stat";
 
const PressStatScene = () => (
  <PressStat before="Edit time down" value={73} suffix="%" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="PressStat"
    component={PressStatScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

The caption rises in letter by letter, then presses open to make room while the figure inflates and counts from from up to value. Pass before, value and suffix; it ships light and dark through theme.

Props9

Prop	Type	Default
before	string"Edit time down" Caption shown before the figure.
value	number73 Final number the figure counts up to.
from	number0 Number the count starts from.
prefix	string"" Text drawn before the number.
suffix	string"%" Text drawn after the number, such as a percent sign.
accent	string— Accent color for highlights and small marks.
background	string— Background color override. Pass "transparent" to composite over other layers.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

beforestring
Caption shown before the figure.
Default"Edit time down"
valuenumber
Final number the figure counts up to.
Default73
fromnumber
Number the count starts from.
Default0
prefixstring
Text drawn before the number.
Default""
suffixstring
Text drawn after the number, such as a percent sign.
Default"%"
accentstring
Accent color for highlights and small marks.
backgroundstring
Background color override. Pass "transparent" to composite over other layers.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"