Smash Count

A giant numeral hard-cuts up through larger values between corners and lands beside a small caption.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SmashCount } from "@/components/remocn/smash-count";
 
const SmashCountScene = () => <SmashCount value={64} from={1} cuts={6} label="scenes, zero keyframes" />;
 
export const RemotionRoot = () => (
  <Composition
    id="SmashCount"
    component={SmashCountScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A giant numeral hard-cuts through a series of larger and larger values, each cut punching in at a new corner of the frame and the cuts speeding up, until the final value lands large at the bottom left and a caption appears in the top right. Pass value, from, cuts and label; accent is the numeral color. It ships light and dark through theme.

Props10

Prop	Type	Default
value	number64 The final number.
from	number1 First number shown before the cuts.
cuts	number6 How many hard cuts, including the final one.
prefix	string"" Text before the number.
suffix	string"" Text after the number.
label	string"scenes, zero keyframes" Caption shown top right on the final cut.
accent	string"#E60012" Color of the numeral.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuenumber
The final number.
Default64
fromnumber
First number shown before the cuts.
Default1
cutsnumber
How many hard cuts, including the final one.
Default6
prefixstring
Text before the number.
Default""
suffixstring
Text after the number.
Default""
labelstring
Caption shown top right on the final cut.
Default"scenes, zero keyframes"
accentstring
Color of the numeral.
Default"#E60012"
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"