# Ridgeline
URL: https://remocn.dev/docs/numbers/ridgeline

Stacked ridgeline distributions per year, the latest one lit in gradient with a 2.6x stat

- Install: `npx shadcn@latest add @remocn/ridgeline`
- Vibe: data
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ridgeline
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Ridgeline } from "@/components/remocn/ridgeline";

const RidgelineScene = () => (
  <Ridgeline
    labels={["2022", "2023", "2024", "2025"]}
    highlightLabel="With remocn"
    value="2.6×"
    caption="more videos per team"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="Ridgeline"
    component={RidgelineScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Grey ridgelines for each period draw in one after another, then a lit gradient ridge rises to the right and shifts the peak while the multiplier stat and caption land. Pass `labels` for the period rows, `highlightLabel` for the lit row, and `value`, `caption`, `axisLabel` and `ticks` for the text. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `labels` | `string[]` | `DEFAULT_LABELS` | Row labels for the grey ridgelines, oldest first. |
| `highlightLabel` | `string` | `"With remocn"` | Label on the lit gradient ridge. |
| `value` | `string` | `"2.6×"` | The hero stat that lands, such as 2.6x. |
| `caption` | `string` | `"more videos per team"` | Line under the hero stat. |
| `axisLabel` | `string` | `"videos per team, per month"` | Caption under the x axis. |
| `ticks` | `string[]` | `DEFAULT_TICKS` | Tick labels along the x axis. |
| `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 before-and-after story across several periods, where the latest distribution should stand out.
- A productivity claim, such as 2.6x more videos per team, backed by shifting distributions.
- A beat that wants a moody, layered chart instead of plain bars.

## Don't use when
- You have only two groups to compare — use `beeswarm`.
- You want flowing layers that change over time — use `streamgraph`.
- You need one before-and-after curve — use `distribution-shift`.