Slim Count

A slim outlined numeral counts down as a wavy fill drains out of it, beside a condensed caption.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { SlimCount } from "@/components/remocn/slim-count";
 
const SlimCountScene = () => <SlimCount value={0} from={100} label="Keyframes left to set by hand" />;
 
export const RemotionRoot = () => (
  <Composition
    id="SlimCount"
    component={SlimCountScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A tall condensed numeral counts from from down to value while a wavy fill drains out of its outline like a tank; a bold caption rises in word by word beside it at the start. Pass value, from and label, with prefix, suffix or decimals if needed; accent colors the fill. It ships light and dark through theme.

Props10

Prop	Type	Default
value	number0 The number the count lands on.
from	number100 Starting number; the fill starts full here.
decimals	number0 Decimal places shown.
prefix	string"" Text before the number.
suffix	string"" Text after the number.
label	string"Keyframes left to set by hand" Caption that rises in word by word.
accent	string— Color of the fill; defaults to the theme ink.
background	string— Stage background color; overrides the theme ground.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuenumber
The number the count lands on.
Default0
fromnumber
Starting number; the fill starts full here.
Default100
decimalsnumber
Decimal places shown.
Default0
prefixstring
Text before the number.
Default""
suffixstring
Text after the number.
Default""
labelstring
Caption that rises in word by word.
Default"Keyframes left to set by hand"
accentstring
Color of the fill; defaults to the theme ink.
backgroundstring
Stage background color; overrides the theme ground.
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"