Core Sum

A monospace figure sums up to 2,097,152 beside a divider and a small caption

Installation

$ pnpm dlx shadcn@latest add @remocn/core-sum

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { CoreSum } from "@/components/remocn/core-sum";
 
const CoreSumScene = () => <CoreSum value={2097152} parts={8} label="frames per night, every core busy" />;
 
export const RemotionRoot = () => (
  <Composition
    id="CoreSum"
    component={CoreSumScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

A column of partial figures counts up row by row, each labelled like 'core 01'. They then merge pairwise, level by level, until a single total remains, which fills with the accent colour and shows the main caption. Pass value, parts, label and partLabel. The length shown is for the default of 8 parts. It ships light and dark through the theme prop.

Props10

Prop	Type	Default
value	number2097152 The final total the parts add up to.
parts	number8 Number of partial rows, rounded to a power of two from 2 to 16.
prefix	string"" Text placed before every number, such as a currency sign.
suffix	string"" Text placed after every number, such as a unit.
label	string"frames per night, every core busy" Caption beside the final total.
partLabel	string"core" Word used to label the partial rows, e.g. 'core 01'.
accent	string— Colour the final total fills with.
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 total the parts add up to.
Default2097152
partsnumber
Number of partial rows, rounded to a power of two from 2 to 16.
Default8
prefixstring
Text placed before every number, such as a currency sign.
Default""
suffixstring
Text placed after every number, such as a unit.
Default""
labelstring
Caption beside the final total.
Default"frames per night, every core busy"
partLabelstring
Word used to label the partial rows, e.g. 'core 01'.
Default"core"
accentstring
Colour the final total fills with.
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"