# Distribution Shift
URL: https://remocn.dev/docs/numbers/distribution-shift

A latency distribution curve collapses left while 120ms and -86% appear

- Install: `npx shadcn@latest add @remocn/distribution-shift`
- Vibe: data
- Natural length: 160f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/distribution-shift
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DistributionShift } from "@/components/remocn/distribution-shift";

const DistributionShiftScene = () => (
  <DistributionShift before={840} after={120} unit="ms" label="p99 latency" />
);

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

A bell-shaped latency curve rises with a marker at its slow tail, then morphs left and tightens as the marker slides to the new value and the percent change appears. Pass `before` and `after` in the same `unit`, plus a `label` for the metric. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `number` | `840` | Starting value, such as p99 latency. |
| `after` | `number` | `120` | Final value after the improvement. |
| `unit` | `string` | `"ms"` | Unit appended to the values. |
| `label` | `string` | `"p99 latency"` | Name of the measured metric. |
| `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 latency or load-time beat where a wide distribution visibly collapses to a faster one.
- A performance claim that needs the percent change shown alongside the new value.
- An engineering-flavored launch scene that proves a speedup with a curve, not just a number.

## Don't use when
- You have two groups of individual samples to compare — use `beeswarm`.
- You want lanes racing to a finish line — use `benchmark-race`.
- You only need the headline multiplier — use `compact-stat`.