Number Mosaic

A field of ticking digits dims while the cells forming the number light up, then a lockup appears beneath.

Installation

$ pnpm dlx shadcn@latest add @remocn/number-mosaic

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { NumberMosaic } from "@/components/remocn/number-mosaic";
 
const NumberMosaicScene = () => <NumberMosaic value="10,000" name="acme" label="launch videos rendered" />;
 
export const RemotionRoot = () => (
  <Composition
    id="NumberMosaic"
    component={NumberMosaicScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);

A dim field of ticking digits fills the frame while the cells that form the number light up into a gradient and the rest fall back; a lockup of mark, product name and label then appears under the figure. Pass value as a string such as "10,000" or "2.4M", plus name and label, or logo to swap the mark. It ships light and dark through theme.

Props7

Prop	Type	Default
value	string"10,000" The number that emerges from the field. Supports digits and `, . + % k K M x`; other characters leave a gap.
label	string"launch videos rendered" Text after the lockup, under the number.
name	string"remocn" Product name in the lockup.
logo	React.ReactNode— Replaces the default Remocn mark in the lockup.
accent	string"#3B5BFD" Gradient accent for the lit cells.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuestring
The number that emerges from the field. Supports digits and `, . + % k K M x`; other characters leave a gap.
Default"10,000"
labelstring
Text after the lockup, under the number.
Default"launch videos rendered"
namestring
Product name in the lockup.
Default"remocn"
logoReact.ReactNode
Replaces the default Remocn mark in the lockup.
accentstring
Gradient accent for the lit cells.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"