Packed Count

A counter climbs with digits packing tight, then a blue fill sweeps across it under a caption.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { PackedCount } from "@/components/remocn/packed-count";
 
const PackedCountScene = () => <PackedCount value={41900} from={120} label="replays on a single launch clip" />;
 
export const RemotionRoot = () => (
  <Composition
    id="PackedCount"
    component={PackedCountScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Digits rise out of a mask as the counter climbs from a small start, packing tight and gaining a place each time a new digit joins. A caption slides in above at the start, and once the count lands a blue fill sweeps across the figure digit by digit. Pass value, from and label; accent recolors the fill. It ships light and dark through theme.

Props9

Prop	Type	Default
value	number41900 The number the count lands on.
from	number120 Starting number the count climbs from.
prefix	string"" Text before the number.
suffix	string"" Text after the number.
label	string"replays on a single launch clip" Caption above the number.
accent	string— Color of the final fill sweep; defaults to a sky blue.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuenumber
The number the count lands on.
Default41900
fromnumber
Starting number the count climbs from.
Default120
prefixstring
Text before the number.
Default""
suffixstring
Text after the number.
Default""
labelstring
Caption above the number.
Default"replays on a single launch clip"
accentstring
Color of the final fill sweep; defaults to a sky blue.
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"