Number Split

A big total splits down a bracket into colored bars, each with its own count and label.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { NumberSplit } from "@/components/remocn/number-split";
 
const NumberSplitScene = () => (
  <NumberSplit total="300+" label="components" parts={[{ label: "animations", value: 120 }, { label: "transitions", value: 90 }]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="NumberSplit"
    component={NumberSplitScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

The total sits large, a gradient bar slides in beneath it and splits into segments joined by a bracket, then each part counts up with its label. Pass total, label and parts; it ships light and dark through theme.

Props6

Prop	Type	Default
total	string"300+" Large figure shown at the top, as text.
label	string"components" Word shown next to the total.
parts	SplitPart[]DEFAULT_PARTS Category counts, each drawn as a colored bar with a label.
accent	string"#3B5BFD" Accent color for highlights and small marks.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".
speed	number1 Playback speed multiplier for the whole timeline.

totalstring
Large figure shown at the top, as text.
Default"300+"
labelstring
Word shown next to the total.
Default"components"
partsSplitPart[]
Category counts, each drawn as a colored bar with a label.
DefaultDEFAULT_PARTS
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1