Beat Count

A big thin numeral counts to 64 in steps locked to a BPM, with a small caption

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BeatCount } from "@/components/remocn/beat-count";
 
const BeatCountScene = () => <BeatCount value={64} beats={8} bpm={120} label="cuts, each one landing on the kick" />;
 
export const RemotionRoot = () => (
  <Composition
    id="BeatCount"
    component={BeatCountScene}
    durationInFrames={160}
    fps={30}
    width={1280}
    height={720}
  />
);

A big numeral steps from from to value in beats equal jumps, one per beat at the given bpm. On each beat it squashes down and thins its weight before releasing, and the last beat rebounds with a spring. A small caption fades in at the top left after the first beat. Pass value, beats, bpm, label, and optionally prefix, suffix and decimals. It ships light and dark through the theme prop.

Props12

Prop	Type	Default
value	number64 The final number the count lands on.
from	number0 The number shown before the first beat.
beats	number8 How many steps the count takes, one per beat.
bpm	number120 Tempo in beats per minute; 30 at minimum. Sets the frames per step.
decimals	number0 Decimal places shown on the number.
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"cuts, each one landing on the kick" Caption at the top left.
accent	string— Colour of the caption text.
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.
Default64
fromnumber
The number shown before the first beat.
Default0
beatsnumber
How many steps the count takes, one per beat.
Default8
bpmnumber
Tempo in beats per minute; 30 at minimum. Sets the frames per step.
Default120
decimalsnumber
Decimal places shown on the number.
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"cuts, each one landing on the kick"
accentstring
Colour of the caption text.
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"