Stat Sequence

Three large stats cut in one after another, then shrink together into a summary row.

Installation

$ pnpm dlx shadcn@latest add @remocn/stat-sequence

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StatSequence } from "@/components/remocn/stat-sequence";
 
const StatSequenceScene = () => (
  <StatSequence name="remocn" eyebrow="in numbers" beat={26} stats={[{ value: "10,000", unit: "+", label: "builders" }, { value: "99.9", unit: "%", label: "uptime" }]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="StatSequence"
    component={StatSequenceScene}
    durationInFrames={170}
    fps={30}
    width={1280}
    height={720}
  />
);

Each stat rises in at monumental size with its label and detail and is replaced by the next one every beat frames. The final stat then shrinks and all stats settle into a row. Pass stats and name; the total length is about 74 + (stats - 1) × beat frames, and it ships light and dark through theme.

Props8

Prop	Type	Default
stats	Stat[]DEFAULT_STATS Stats to show, each with a value, optional unit, label and detail.
name	string"remocn" Product name in the corner lockup.
eyebrow	string"in numbers" Muted text after the lockup.
logo	React.ReactNode— React node that replaces the default Remocn mark in the lockup.
beat	number26 Frames each stat owns before the next one cuts in.
accent	string"#3B5BFD" Accent color for highlights and small marks.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".

statsStat[]
Stats to show, each with a value, optional unit, label and detail.
DefaultDEFAULT_STATS
namestring
Product name in the corner lockup.
Default"remocn"
eyebrowstring
Muted text after the lockup.
Default"in numbers"
logoReact.ReactNode
React node that replaces the default Remocn mark in the lockup.
beatnumber
Frames each stat owns before the next one cuts in.
Default26
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"