Flash Count

A counter lands on 3,600 with a camera-flash pop, an exposure eyebrow in the corner

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { FlashCount } from "@/components/remocn/flash-count";
 
const FlashCountScene = () => <FlashCount value={3600} from={120} eyebrow="f/8  ·  1/250 s" flashAt={54} />;
 
export const RemotionRoot = () => (
  <Composition
    id="FlashCount"
    component={FlashCountScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

A large light-weight number counts up from from and the number drifts and scales slightly into place. At flashAt the screen pops with a camera flash, the number lands on value, and the eyebrow with its marker dot and the caption fade in. Pass value, from, label, eyebrow and flashAt. It ships light and dark through the theme prop.

Props12

Prop	Type	Default
value	number3600 The final number the count lands on.
from	number120 The number the count starts from.
decimals	number0 Decimal places shown on the number.
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"frames in a two‑minute launch film" Caption that fades in after the flash.
eyebrow	string"f/8 · 1/250 s" Small exposure-style line shown with the caption.
flashAt	number54 Frame of the camera flash; the count runs up to it. Length is this plus 22.
accent	string— Colour of the small marker dot.
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.
Default3600
fromnumber
The number the count starts from.
Default120
decimalsnumber
Decimal places shown on the number.
Default0
prefixstring
Text placed before the number, such as a currency sign.
Default""
suffixstring
Text placed after the number, such as a unit.
Default""
labelstring
Caption that fades in after the flash.
Default"frames in a two‑minute launch film"
eyebrowstring
Small exposure-style line shown with the caption.
Default"f/8 · 1/250 s"
flashAtnumber
Frame of the camera flash; the count runs up to it. Length is this plus 22.
Default54
accentstring
Colour of the small marker dot.
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"