# Streamgraph
URL: https://remocn.dev/docs/numbers/streamgraph

Flowing stacked layers draw across the frame and settle into a 48% share

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

## Installation

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

## Usage

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

const StreamgraphScene = () => (
  <Streamgraph
    highlight={2}
    label="of new projects"
    series={[
      { label: "Kitebase", values: [12, 14, 17, 19, 18, 16, 15, 13] },
      { label: "Lumen", values: [9, 10, 12, 14, 15, 13, 11, 9] },
      { label: "remocn", values: [2, 3, 5, 9, 13, 19, 25, 33] },
    ]}
  />
);

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

Stacked layers draw from left to right as a flowing stream, then the highlighted layer takes the gradient while the others dim, and its share counts up with a label. Pass `series` (label and one value per time step), `highlight` and `label`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `series` | `StreamSeries[]` | `DEFAULT_SERIES` | Layers of the stream, each with one value per time step. |
| `highlight` | `number` | `2` | Index of the layer that gets the gradient. |
| `label` | `string` | `"of new projects"` | Line under the final share. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |
| `speed` | `number` | `1` | Playback multiplier. |

## Use when
- A trend beat with several layers over time where one layer swells into the headline share.
- A market or usage story that is more about flow and momentum than exact bar values.
- An atmospheric data scene with a single closing number, such as 48% of new projects.

## Don't use when
- You need exact values at a few time points — use `stacked-shift`.
- You want separate distribution rows per period — use `ridgeline`.
- You only have one snapshot of shares — use `share-donut`.