Stat Inline

A large figure appears alone, then slides into place inside a sentence as the other words rise in.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StatInline } from "@/components/remocn/stat-inline";
 
const StatInlineScene = () => (
  <StatInline value="12,480" text="Builders shipped {value} launch videos this year." label="Launch videos shipped" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="StatInline"
    component={StatInlineScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

The value appears large with a label, then moves into its slot in the sentence while the surrounding words rise in around it. Put {value} in text where the number belongs. Pass value, text, label and align; it ships light and dark through theme.

Props8

Prop	Type	Default
value	string"12,480" The number that gets highlighted, as text.
text	string"Builders shipped {value} launch videos with remocn this year." Sentence containing the {value} placeholder where the number lands.
label	string"Launch videos shipped" Small label shown while the number is still alone.
align	"left" \| "center""left" Align the sentence to the left or the center.
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".

valuestring
The number that gets highlighted, as text.
Default"12,480"
textstring
Sentence containing the {value} placeholder where the number lands.
Default"Builders shipped {value} launch videos with remocn this year."
labelstring
Small label shown while the number is still alone.
Default"Launch videos shipped"
align"left" | "center"
Align the sentence to the left or the center.
Default"left"
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"