Growth Line

An exponential growth curve draws through milestones to a 100k endpoint

Installation

$ pnpm dlx shadcn@latest add @remocn/growth-line

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { GrowthLine } from "@/components/remocn/growth-line";
 
const GrowthLineScene = () => (
  <GrowthLine value="100k" label="creators in the first year" steepness={4.6} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GrowthLine"
    component={GrowthLineScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

An exponential curve draws across the frame while the camera tracks the tip, popping each milestone along the way, then the endpoint value lands with a ring. Pass value, label, and milestones; tune the curve with steepness. Ships dark and light via theme.

Props7

Prop	Type	Default
value	string"100k" The number that lands at the tip.
label	string"creators in the first year" Muted line under the value.
milestones	GrowthMilestone[]DEFAULT_MILESTONES Points on the curve to call out, in order.
steepness	number4.6 How hard the curve bends upward: 2 = gentle, 6 = hockey stick.
accent	string"#3B5BFD" Accent color for the hero element.
speed	number1 Playback multiplier.
theme	"dark" \| "light""dark" Dark or light palette.

valuestring
The number that lands at the tip.
Default"100k"
labelstring
Muted line under the value.
Default"creators in the first year"
milestonesGrowthMilestone[]
Points on the curve to call out, in order.
DefaultDEFAULT_MILESTONES
steepnessnumber
How hard the curve bends upward: 2 = gentle, 6 = hockey stick.
Default4.6
accentstring
Accent color for the hero element.
Default"#3B5BFD"
speednumber
Playback multiplier.
Default1
theme"dark" | "light"
Dark or light palette.
Default"dark"