Abacus Count

Abacus beads slide along their rods to count up to 48,216

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AbacusCount } from "@/components/remocn/abacus-count";
 
const AbacusCountScene = () => <AbacusCount value={48216} label="renders this week" />;
 
export const RemotionRoot = () => (
  <Composition
    id="AbacusCount"
    component={AbacusCountScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);

Rods and beads fade in beside a large readout. Beads slide along each rod in springy steps, carrying over into the next rod, while the matching digit in the readout updates and the leading digit takes a gradient. A caption fades in after the last step. Pass value up to 999,999 and label. It ships light and dark through the theme prop.

Props5

Prop	Type	Default
value	number48216 The final number, 0 to 999,999. More digits add more rods.
label	string"renders this week" Caption under the readout.
accent	string"#3B5BFD" Colour of the small marker dot before the caption.
theme	"dark" \| "light""dark" Ships light and dark.
speed	number1 Playback speed multiplier; 1 is the designed pace.

valuenumber
The final number, 0 to 999,999. More digits add more rods.
Default48216
labelstring
Caption under the readout.
Default"renders this week"
accentstring
Colour of the small marker dot before the caption.
Default"#3B5BFD"
theme"dark" | "light"
Ships light and dark.
Default"dark"
speednumber
Playback speed multiplier; 1 is the designed pace.
Default1