Stat Rail

A headline card shrinks over scenery while a rail of stats steps through on the left.

Installation

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

Usage

tsx

// src/Root.tsx
import { Composition, staticFile } from "remotion";
import { StatRail } from "@/components/remocn/stat-rail";
 
const StatRailScene = () => (
  <StatRail image={staticFile("hero.jpg")} tagline="The *future* of launch video is code" stats={[{ value: "120", label: "components ready to install" }, { value: "4", label: "minutes to first render" }]} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="StatRail"
    component={StatRailScene}
    durationInFrames={144}
    fps={30}
    width={1280}
    height={720}
  />
);

The tagline fills the frame over the image, then the image shrinks to the right as the rail slides in and each stat steps up in turn, the last one landing as a chip. By default it uses a stock image that only exists in the Remocn repo, so pass your own image URL or staticFile(...). Wrap a tagline word in asterisks to set it in the accent serif; it ships light and dark through theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props10

Prop	Type	Default
stats	Stat[]DEFAULT_STATS Stats on the rail, up to four, each with a value and label.
image	string— Image URL for the scenery card. The default only exists in the Remocn repo.
tagline	string"The future of launch video is code" Headline over the image; wrap a word in asterisks to accent it.
theme	"dark" \| "light""dark" Color theme, "dark" or "light".
background	string— Ground background color override.
accent	string— Accent color for the highlighted stat and chip.
card	string— Background color of the stat card.
faded	string— Color of stats that have not stepped in yet.
ground	GshPresetId— Gradient preset used as the background ground.
groundParams	Partial<GradientParams>— Overrides for the gradient ground's parameters.

statsStat[]
Stats on the rail, up to four, each with a value and label.
DefaultDEFAULT_STATS
imagestring
Image URL for the scenery card. The default only exists in the Remocn repo.
taglinestring
Headline over the image; wrap a word in asterisks to accent it.
Default"The *future* of launch video is code"
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"
backgroundstring
Ground background color override.
accentstring
Accent color for the highlighted stat and chip.
cardstring
Background color of the stat card.
fadedstring
Color of stats that have not stepped in yet.
groundGshPresetId
Gradient preset used as the background ground.
groundParamsPartial<GradientParams>
Overrides for the gradient ground's parameters.