Tall Count

A tall condensed figure counts up beside a short caption while its width opens and it lifts into place.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TallCount } from "@/components/remocn/tall-count";
 
const TallCountScene = () => (
  <TallCount value={240} prefix="+" suffix="%" label="more watch time on launch posts that move" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TallCount"
    component={TallCountScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

The caption rises in while the figure counts from from to value, growing wider as it goes, then springs up into place. Prefix and suffix such as plus and percent are part of the figure. Pass value, prefix, suffix and label; it ships light and dark through theme.

Props10

Prop	Type	Default
value	number240 Final number the figure counts up to.
from	number0 Number the count starts from.
decimals	number0 Decimal places shown while counting.
prefix	string"+" Text drawn before the number.
suffix	string"%" Text drawn after the number.
label	string"more watch time on launch posts that move" Caption that rises in beside the figure.
accent	string"#3B5BFD" Accent color for highlights and small marks.
background	string— Background color override. Pass "transparent" to composite over other layers.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

valuenumber
Final number the figure counts up to.
Default240
fromnumber
Number the count starts from.
Default0
decimalsnumber
Decimal places shown while counting.
Default0
prefixstring
Text drawn before the number.
Default"+"
suffixstring
Text drawn after the number.
Default"%"
labelstring
Caption that rises in beside the figure.
Default"more watch time on launch posts that move"
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
backgroundstring
Background color override. Pass "transparent" to composite over other layers.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"