# Growth Line
URL: https://remocn.dev/docs/numbers/growth-line

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

- Install: `npx shadcn@latest add @remocn/growth-line`
- Vibe: data
- Natural length: 148f @ 30fps

## Installation

```bash
npx 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`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `4.6` | How hard the curve bends upward: 2 = gentle, 6 = hockey stick. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `speed` | `number` | `1` | Playback multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |

## Use when
- A growth story where a curve draws through milestones to a big endpoint such as 100k.
- A first-year or since-launch recap with a few named milestones along the way.
- A hockey-stick beat where the steepness of the curve is the message.

## Don't use when
- You want a compact glowing trend beside a stat — use `sparkline-thread`.
- You have real categories on an axis — use `spring-bars`.
- You want the chart to transform between shapes — use `chart-morph`.