Fuchidori Count

A sticker-style counter whose digits gain stacked red outline borders, landing on 4,096

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FuchidoriCount } from "@/components/remocn/fuchidori-count";
 
const FuchidoriCountScene = () => <FuchidoriCount value={4096} from={1} label="captions styled without opening an editor" maxBorders={4} />;
 
export const RemotionRoot = () => (
  <Composition
    id="FuchidoriCount"
    component={FuchidoriCountScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A large number rises into place and counts from from to value on a log-like curve. Each time it crosses a power of ten a new outline ring springs out around the glyphs, up to maxBorders rings, alternating through the border colours. A vertical caption fades in beside it. Pass value, from, label, maxBorders and optionally colors. It ships light and dark through the theme prop.

Props11

Prop	Type	Default
value	number4096 The final number the count lands on.
from	number1 The number the count starts from, at least 1.
prefix	string"" Text placed before the number, such as a currency sign.
suffix	string"" Text placed after the number, such as a unit.
label	string"captions styled without opening an editor" Vertical caption beside the number.
maxBorders	number4 Most outline rings drawn, one per power of ten crossed.
colors	string[]— Ring colours, used in order and repeated. Defaults to accent and the ink colour.
accent	string— Colour of the first ring and the caption text.
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 number the count lands on.
Default4096
fromnumber
The number the count starts from, at least 1.
Default1
prefixstring
Text placed before the number, such as a currency sign.
Default""
suffixstring
Text placed after the number, such as a unit.
Default""
labelstring
Vertical caption beside the number.
Default"captions styled without opening an editor"
maxBordersnumber
Most outline rings drawn, one per power of ten crossed.
Default4
colorsstring[]
Ring colours, used in order and repeated. Defaults to accent and the ink colour.
accentstring
Colour of the first ring and the caption text.
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"