Row Count

A big number rolls up across stacked ruled rows, adding a row at each thousands group.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RowCount } from "@/components/remocn/row-count";
 
const RowCountScene = () => <RowCount value={27300000} label="frames rendered in every region, every night" />;
 
export const RemotionRoot = () => (
  <Composition
    id="RowCount"
    component={RowCountScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The number counts up on a log curve beside a stack of ruled rows; each thousands group gets its own row, and a new row springs in as the count crosses 1,000, 1,000,000 and beyond, with the newest row tinted in the accent. A small label sits to the side. Pass value, from, prefix and label. It ships light and dark through theme.

Props8

Prop	Type	Default
value	number27300000 The number the count lands on.
from	number1 Starting number; the count climbs on a log curve.
prefix	string"" Text before the number.
label	string"frames rendered in every region, every night" Small label beside the stack.
accent	string— Tint for the newest row; defaults to the theme accent.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuenumber
The number the count lands on.
Default27300000
fromnumber
Starting number; the count climbs on a log curve.
Default1
prefixstring
Text before the number.
Default""
labelstring
Small label beside the stack.
Default"frames rendered in every region, every night"
accentstring
Tint for the newest row; defaults to the theme accent.
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"