Diminuendo

Huge counter climbs to 860,000 while each trailing digit group fades quieter than the last

Installation

$ pnpm dlx shadcn@latest add @remocn/diminuendo

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { Diminuendo } from "@/components/remocn/diminuendo";
 
const DiminuendoScene = () => <Diminuendo value={860000} label="frames rendered from the registry last month" ratio={0.8} />;
 
export const RemotionRoot = () => (
  <Composition
    id="Diminuendo"
    component={DiminuendoScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A big figure counts from from to value on a log-like curve, adding new leading digits as it passes each power of ten. Each digit group to the right is drawn smaller and fainter by ratio, and digits roll as they change. A caption fades in at the top left. Pass value, label, ratio and optionally prefix, suffix and separator. It ships light and dark through the theme prop.

Props11

Prop	Type	Default
value	number860000 The final number the count lands on.
from	number0 The number the count starts from.
prefix	string"" Text placed before the number, such as a currency sign.
suffix	string"" Text placed after the number, such as a unit.
label	string"frames rendered from the registry last month" Caption at the top left.
ratio	number0.8 Size of each lower digit relative to the one before it, 0.5 to 0.95.
separator	string"," Thousands separator character. Pass an empty string for none.
accent	string"#8ACE00" Base colour of the digit ramp and the tint of the stage.
background	string— Stage colour; pass 'transparent' to layer over other footage.
speed	number1 Playback speed multiplier; 1 is the designed pace.
theme	"dark" \| "light""dark" Ships light and dark.

valuenumber
The final number the count lands on.
Default860000
fromnumber
The number the count starts from.
Default0
prefixstring
Text placed before the number, such as a currency sign.
Default""
suffixstring
Text placed after the number, such as a unit.
Default""
labelstring
Caption at the top left.
Default"frames rendered from the registry last month"
rationumber
Size of each lower digit relative to the one before it, 0.5 to 0.95.
Default0.8
separatorstring
Thousands separator character. Pass an empty string for none.
Default","
accentstring
Base colour of the digit ramp and the tint of the stage.
Default"#8ACE00"
backgroundstring
Stage colour; pass 'transparent' to layer over other footage.
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1
theme"dark" | "light"
Ships light and dark.
Default"dark"