Churn Count

A huge frame counter reaches 72,960 under a small blue caption on black

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ChurnCount } from "@/components/remocn/churn-count";
 
const ChurnCountScene = () => <ChurnCount value={72960} label="frames played back live, straight from your props" />;
 
export const RemotionRoot = () => (
  <Composition
    id="ChurnCount"
    component={ChurnCountScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

A giant number sits at the bottom right and counts from from to value with a fast ease-out. Digits that are still changing are drawn thin and in the accent colour, then thicken back to full weight as they settle. A small caption fades in beside it. Pass value, from and label. It ships light and dark through the theme prop.

Props7

Prop	Type	Default
value	number72960 The final number the count lands on.
from	number0 The number the count starts from.
label	string"frames played back live, straight from your props" Small caption beside the figure.
accent	string— Colour of digits while they are still changing. Hex value expected.
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.
Default72960
fromnumber
The number the count starts from.
Default0
labelstring
Small caption beside the figure.
Default"frames played back live, straight from your props"
accentstring
Colour of digits while they are still changing. Hex value expected.
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"