# Sankey Flow
URL: https://remocn.dev/docs/numbers/sankey-flow

Flows from several sources merge into one target block that reads 12.4k

- Install: `npx shadcn@latest add @remocn/sankey-flow`
- Vibe: data
- Natural length: 98f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/sankey-flow
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SankeyFlow } from "@/components/remocn/sankey-flow";

const SankeyFlowScene = () => (
  <SankeyFlow
    target="remocn"
    label="videos rendered"
    sources={[
      { label: "Marketing", value: 4100 },
      { label: "Product", value: 3200 },
      { label: "Docs", value: 2400 },
    ]}
  />
);

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

Source nodes appear on the left, then flows of different widths draw one by one into a single target block that lands with the combined total and label. Pass `sources` (label and value), `target`, and `label`; the total is the sum unless you set `total`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `sources` | `SankeySource[]` | `DEFAULT_SOURCES` | Source nodes on the left, each with a label and value. |
| `target` | `string` | `"remocn"` | Name on the merged target block. |
| `total` | `number` | — | Number shown on the target; defaults to the sum of sources. |
| `label` | `string` | `"videos rendered"` | Caption under the total. |
| `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 beat showing several sources or channels merging into one outcome, such as total videos rendered.
- A migration or adoption story where many inputs feed your product.
- A scene where the combined total, such as 12.4k, is the payoff.

## Don't use when
- You want shares of a whole as a percentage — use `share-donut`.
- You want the parts as rectangles sized by value — use `treemap-split`.
- You want one headline metric with no breakdown — use `compact-stat`.