Lumen Count

A glowing number counts up with a soft floor reflection and a caption beneath it.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { LumenCount } from "@/components/remocn/lumen-count";
 
const LumenCountScene = () => <LumenCount value={200} suffix="+" label="components for your launch video" />;
 
export const RemotionRoot = () => (
  <Composition
    id="LumenCount"
    component={LumenCountScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A big number counts up on a dark stage while its fill brightens from dim to a glowing gradient, flares once on arrival and casts a soft reflection on the floor; the caption fades in underneath. Pass value and label, plus optional suffix and eyebrow. It ships light and dark through theme.

Props8

Prop	Type	Default
value	number200 The number the count lands on.
from	number1 Starting number; the count climbs on a log curve from here.
suffix	string"" Text appended to the number, such as a plus sign.
label	string"components, ready to light up your launch video" Caption under the number.
eyebrow	string"" Small line above the number; hidden when empty.
accent	string"#3B5BFD" Base color of the glow gradient.
speed	number1 Playback speed multiplier.
theme	"dark" \| "light""dark" Light or dark palette.

valuenumber
The number the count lands on.
Default200
fromnumber
Starting number; the count climbs on a log curve from here.
Default1
suffixstring
Text appended to the number, such as a plus sign.
Default""
labelstring
Caption under the number.
Default"components, ready to light up your launch video"
eyebrowstring
Small line above the number; hidden when empty.
Default""
accentstring
Base color of the glow gradient.
Default"#3B5BFD"
speednumber
Playback speed multiplier.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"