Milestone Roll

A counter races through milestones, flashing at each, and lands on a final milestone poster

Installation

$ pnpm dlx shadcn@latest add @remocn/milestone-roll

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { MilestoneRoll } from "@/components/remocn/milestone-roll";
 
const MilestoneRollScene = () => (
  <MilestoneRoll milestones={[100, 1000, 10000, 50000]} unit="signups" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="MilestoneRoll"
    component={MilestoneRollScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A big counter races up to each milestone in turn; every hit flashes, shakes and shrinks the ring behind it. On the last milestone the number becomes a poster with the unit in serif italic and a wordmark. Pass ascending milestones and a unit; it ships dark and light via theme. The closing wordmark is the Remocn logo, swap RemocnLogo in the copied file.

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

Props7

Prop	Type	Default
milestones	number[][1000, 10000, 100000, 1000000] Milestones the counter races through, ascending. The last is the poster.
unit	string"renders" What is being counted; shown on the poster and in the top label.
theme	"dark" \| "light""dark" Color scheme. Ships dark and light.
ground	GshPresetId— gradients.sh preset id for the animated ground.
groundParams	Partial<GradientParams>— Overrides for the ground shader parameters.
speed	number1 Playback speed multiplier for the whole timeline.
accent	string— Accepted for API consistency; the color comes from the ground.

milestonesnumber[]
Milestones the counter races through, ascending. The last is the poster.
Default[1000, 10000, 100000, 1000000]
unitstring
What is being counted; shown on the poster and in the top label.
Default"renders"
theme"dark" | "light"
Color scheme. Ships dark and light.
Default"dark"
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.
speednumber
Playback speed multiplier for the whole timeline.
Default1
accentstring
Accepted for API consistency; the color comes from the ground.