Module Count

A block-pixel number snaps through stepped values on a gridded ground, then a short caption fades in.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ModuleCount } from "@/components/remocn/module-count";
 
const ModuleCountScene = () => <ModuleCount value={120} suffix="+" label="Scenes snapped to one grid" />;
 
export const RemotionRoot = () => (
  <Composition
    id="ModuleCount"
    component={ModuleCountScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

A five-row block-pixel number snaps through a series of stepped values on a faint grid, each step morphing the modules, then locks on the final figure while a short caption fades in word by word. Pass value, optional prefix and suffix, and label; steps sets how many readings it snaps through. It ships light and dark through theme.

Props10

Prop	Type	Default
value	number48 The number the count snaps to.
from	number0 Starting number of the first reading.
prefix	string"" Text before the number, such as a currency sign.
suffix	string"" Text after the number.
label	string"Scenes, every one snapped to a single grid" Caption that fades in word by word.
steps	number11 How many stepped readings the count passes through.
accent	string— Color of the digit modules; 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 snaps to.
Default48
fromnumber
Starting number of the first reading.
Default0
prefixstring
Text before the number, such as a currency sign.
Default""
suffixstring
Text after the number.
Default""
labelstring
Caption that fades in word by word.
Default"Scenes, every one snapped to a single grid"
stepsnumber
How many stepped readings the count passes through.
Default11
accentstring
Color of the digit modules; 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"