Carry Count

A big counter reaches 13,580 with a small caption, "scenes students built in week one"

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CarryCount } from "@/components/remocn/carry-count";
 
const CarryCountScene = () => (
  <CarryCount
    from={2855}
    value={13580}
    label={"scenes students\nbuilt in week one"}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="CarryCount"
    component={CarryCountScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A large number starts at from and adds in steps chunks. Each change squashes the changed digit and, where a column overflows, a small disc carries a 1 over to the next column, growing a new digit at the left when needed. A caption of one or more lines slides up beside the number. Pass value, from, steps and label with a line break. It ships light and dark through the theme prop.

Props8

Prop	Type	Default
value	number13580 The final number the count lands on.
from	number2855 The number the count starts from.
steps	number5 How many additions it takes to get from `from` to `value`.
label	string"scenes students\nbuilt in week one" Caption beside or below the number; use a line break to split lines.
accent	string— Colour of the carry disc.
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.
Default13580
fromnumber
The number the count starts from.
Default2855
stepsnumber
How many additions it takes to get from `from` to `value`.
Default5
labelstring
Caption beside or below the number; use a line break to split lines.
Default"scenes students\nbuilt in week one"
accentstring
Colour of the carry disc.
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"