Lean Count

A heavy figure counts up in a few surges, each snapping its slant, beside a short label.

Installation

$ pnpm dlx shadcn@latest add @remocn/lean-count

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LeanCount } from "@/components/remocn/lean-count";
 
const LeanCountScene = () => (
  <LeanCount value={3.2} suffix="×" label="Faster renders on the laptop you already own." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="LeanCount"
    component={LeanCountScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The label words rise in while the figure counts from from up to value in steps surges, each surge swinging the slant from leaning back to leaning forward. The suffix is drawn in the accent color. Pass value, suffix and label to make it yours; it ships light and dark through theme.

Props12

Prop	Type	Default
value	number3.2 Final number the figure counts up to.
from	number1 Number the count starts from.
decimals	number1 Decimal places shown while counting.
prefix	string"" Text drawn before the number, such as a currency sign.
suffix	string"×" Text drawn after the number, in the accent color.
label	string"Faster renders on the laptop you already own." Short sentence that rises in word by word at the top left.
lean	number14 Slant angle in degrees at the extremes of each surge.
steps	number3 Number of count surges the figure is split into.
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".

valuenumber
Final number the figure counts up to.
Default3.2
fromnumber
Number the count starts from.
Default1
decimalsnumber
Decimal places shown while counting.
Default1
prefixstring
Text drawn before the number, such as a currency sign.
Default""
suffixstring
Text drawn after the number, in the accent color.
Default"×"
labelstring
Short sentence that rises in word by word at the top left.
Default"Faster renders on the laptop you already own."
leannumber
Slant angle in degrees at the extremes of each surge.
Default14
stepsnumber
Number of count surges the figure is split into.
Default3
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"