Tally Marks

Hand-drawn tally marks fill rows, straighten into neat groups and resolve into a counted total.

Installation

$ pnpm dlx shadcn@latest add @remocn/tally-marks

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TallyMarks } from "@/components/remocn/tally-marks";
 
const TallyMarksScene = () => <TallyMarks value={1240} label="videos rendered on launch day" />;
 
export const RemotionRoot = () => (
  <Composition
    id="TallyMarks"
    component={TallyMarksScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

Hand-drawn tally strokes scratch in across the frame while the camera drifts over them, then straighten into neat tally groups before collapsing into a gradient total with a label beneath. Pass value and label; rows and groupsPerRow size the tally field and accent colors the numeral. It ships light and dark through theme.

Props7

Prop	Type	Default
value	number1240 The total the tally resolves into.
label	string"videos rendered on launch day" Caption under the total.
rows	number4 How many rows of tally groups.
groupsPerRow	number9 How many tally groups sit in each row.
accent	string"#3B5BFD" End color of the numeral gradient.
theme	"dark" \| "light""dark" Light or dark palette.
speed	number1 Playback speed multiplier.

valuenumber
The total the tally resolves into.
Default1240
labelstring
Caption under the total.
Default"videos rendered on launch day"
rowsnumber
How many rows of tally groups.
Default4
groupsPerRownumber
How many tally groups sit in each row.
Default9
accentstring
End color of the numeral gradient.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark palette.
Default"dark"
speednumber
Playback speed multiplier.
Default1