Distribution Shift

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

Installation

$ pnpm dlx 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.

Props7

Prop	Type	Default
before	number840 Starting value, such as p99 latency.
after	number120 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	number1 Playback multiplier.

beforenumber
Starting value, such as p99 latency.
Default840
afternumber
Final value after the improvement.
Default120
unitstring
Unit appended to the values.
Default"ms"
labelstring
Name of the measured metric.
Default"p99 latency"
accentstring
Accent color for the hero element.
Default"#3B5BFD"
theme"dark" | "light"
Dark or light palette.
Default"dark"
speednumber
Playback multiplier.
Default1