{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "distribution-shift",
  "title": "Distribution Shift",
  "description": "A latency distribution curve collapses left while 120ms and -86% appear.",
  "dependencies": ["remotion", "@remotion/google-fonts"],
  "files": [
    {
      "path": "registry/remocn/distribution-shift/index.tsx",
      "content": "\"use client\";\n\nimport { loadFont as loadMono } from \"@remotion/google-fonts/JetBrainsMono\";\nimport { loadFont } from \"@remotion/google-fonts/SpaceGrotesk\";\nimport { useId } from \"react\";\nimport {\n  AbsoluteFill,\n  Easing,\n  interpolate,\n  interpolateColors,\n  spring,\n  useCurrentFrame,\n  useVideoConfig,\n} from \"remotion\";\n\nconst { fontFamily: sans } = loadFont(\"normal\", {\n  weights: [\"400\", \"500\"],\n  subsets: [\"latin\"],\n});\nconst { fontFamily: mono } = loadMono(\"normal\", {\n  weights: [\"400\"],\n  subsets: [\"latin\"],\n});\n\nexport interface DistributionShiftProps {\n  before?: number;\n  after?: number;\n  unit?: string;\n  label?: string;\n  accent?: string;\n  theme?: \"dark\" | \"light\";\n  speed?: number;\n}\n\nconst EASE_IO = Easing.bezier(0.65, 0, 0.35, 1);\nconst EASE_OUT = Easing.bezier(0.22, 1, 0.36, 1);\nconst CLAMP = {\n  extrapolateLeft: \"clamp\",\n  extrapolateRight: \"clamp\",\n} as const;\n\nconst THEMES = {\n  dark: {\n    bg: \"#0A0A0B\",\n    fg: \"#F3F2EF\",\n    muted: \"#8B8A90\",\n    axis: \"rgba(255,255,255,0.22)\",\n    neutral: \"#77767C\",\n    ghost: \"rgba(255,255,255,0.32)\",\n    // gradients.sh \"limb\": ice lavender crest → violet → accent at the floor.\n    ramp: [\"#E9ECFF\", \"#8A8BFF\"],\n    stroke: \"#C9CBFF\",\n    delta: \"#A9AAFF\",\n    area: 0.22,\n    glow: \"rgba(75,43,214,0.42)\",\n    grain: 0.06,\n  },\n  light: {\n    bg: \"#F5F4F0\",\n    fg: \"#121214\",\n    muted: \"#6E6C67\",\n    axis: \"rgba(18,18,20,0.22)\",\n    neutral: \"#A9A7A1\",\n    ghost: \"rgba(18,18,20,0.3)\",\n    ramp: [\"#8A8BFF\", \"#4B2BD6\"],\n    stroke: \"#4B2BD6\",\n    delta: \"#4B2BD6\",\n    area: 0.16,\n    glow: \"rgba(138,139,255,0.22)\",\n    grain: 0.045,\n  },\n} as const;\n\nconst AXIS = [-16, 14] as const;\nconst RISE = -4;\nconst MARK = [34, 48] as const;\nconst MORPH = [64, 116] as const;\nconst HIT = MORPH[1];\nconst BINS = 96;\nconst Z99 = 2.326;\nconst SIGMA_BEFORE = 0.52;\nconst SIGMA_AFTER = 0.3;\n\nconst lerp = (a: number, b: number, k: number) => a + (b - a) * k;\n\nfunction niceStep(max: number) {\n  const raw = max / 5;\n  const pow = 10 ** Math.floor(Math.log10(raw));\n  const f = raw / pow;\n  const n = f <= 1 ? 1 : f <= 2 ? 2 : f <= 2.5 ? 2.5 : f <= 5 ? 5 : 10;\n  return n * pow;\n}\n\nfunction shape(p99: number, sigma: number) {\n  return { mu: Math.log(p99) - Z99 * sigma, sigma };\n}\n\nfunction density(x: number, mu: number, sigma: number) {\n  if (x <= 0) return 0;\n  const z = (Math.log(x) - mu) / sigma;\n  return Math.exp(-0.5 * z * z) / (x * sigma);\n}\n\nfunction Grain({ opacity }: { opacity: number }) {\n  const id = `g${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  return (\n    <svg\n      width=\"100%\"\n      height=\"100%\"\n      style={{ position: \"absolute\", inset: 0, opacity }}\n      aria-hidden\n    >\n      <filter id={id}>\n        <feTurbulence\n          type=\"fractalNoise\"\n          baseFrequency=\"0.9\"\n          numOctaves={2}\n          seed={23}\n          stitchTiles=\"stitch\"\n        />\n        <feColorMatrix values=\"0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.9 0\" />\n      </filter>\n      <rect width=\"100%\" height=\"100%\" filter={`url(#${id})`} />\n    </svg>\n  );\n}\n\nfunction Readout({\n  value,\n  unit,\n  size,\n  color,\n  unitColor,\n}: {\n  value: number;\n  unit: string;\n  size: number;\n  color: string;\n  unitColor: string;\n}) {\n  return (\n    <span\n      style={{\n        fontFamily: sans,\n        fontWeight: 400,\n        fontSize: size,\n        lineHeight: 0.92,\n        letterSpacing: \"-0.04em\",\n        color,\n        fontVariantNumeric: \"tabular-nums\",\n        whiteSpace: \"nowrap\",\n      }}\n    >\n      {Math.round(value).toLocaleString(\"en-US\")}\n      <span\n        style={{\n          fontSize: size * 0.36,\n          letterSpacing: \"0em\",\n          color: unitColor,\n          marginLeft: size * 0.04,\n        }}\n      >\n        {unit}\n      </span>\n    </span>\n  );\n}\n\nexport function DistributionShift({\n  before = 840,\n  after = 120,\n  unit = \"ms\",\n  label = \"p99 latency\",\n  accent = \"#3B5BFD\",\n  theme = \"dark\",\n  speed = 1,\n}: DistributionShiftProps) {\n  const t = useCurrentFrame() * speed;\n  const { width, height, fps } = useVideoConfig();\n  const u = Math.min(width / 1280, height / 720);\n  const p = THEMES[theme];\n  const hw = Math.max(1, u);\n\n  const hi = Math.max(before, after);\n  const step = niceStep(hi * 1.18);\n  const axisMax = Math.ceil((hi * 1.12) / step) * step;\n  const ticks = Array.from(\n    { length: Math.round(axisMax / step) + 1 },\n    (_, i) => i * step,\n  );\n\n  const L = width * 0.08;\n  const R = width * 0.92;\n  const base = height * 0.8;\n  const top = height * 0.3;\n  const xOf = (v: number) => L + (v / axisMax) * (R - L);\n\n  const morph = interpolate(t, MORPH, [0, 1], { ...CLAMP, easing: EASE_IO });\n  const sb = shape(before, SIGMA_BEFORE);\n  const sa = shape(after, SIGMA_AFTER);\n  const curveAt = (k: number) => {\n    const mu = lerp(sb.mu, sa.mu, k);\n    const sigma = lerp(SIGMA_BEFORE, SIGMA_AFTER, k);\n    const peak = density(Math.exp(mu - sigma * sigma), mu, sigma);\n    const h = lerp(0.3, 1, k) * (base - top);\n    return (v: number) => (density(v, mu, sigma) / peak) * h;\n  };\n  const now = curveAt(morph);\n  const was = curveAt(0);\n\n  const markerV = Math.exp(lerp(Math.log(before), Math.log(after), morph));\n  const markerX = xOf(markerV);\n  const color = interpolateColors(morph, [0, 1], [p.neutral, p.stroke]);\n  const gradId = `d${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const stops = [p.ramp[0], p.ramp[1], accent].map((c) =>\n    interpolateColors(morph, [0, 1], [p.neutral, c]),\n  );\n\n  const axisK = interpolate(t, AXIS, [0, 1], { ...CLAMP, easing: EASE_IO });\n  const markK = interpolate(t, MARK, [0, 1], { ...CLAMP, easing: EASE_OUT });\n  const tagIn = interpolate(t, [MARK[0] + 6, MARK[1] + 8], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n  const ghostO = interpolate(t, [MORPH[0], MORPH[0] + 14], [0, 1], CLAMP);\n  const kick = spring({\n    frame: t - HIT,\n    fps,\n    config: { damping: 14, stiffness: 180, mass: 0.6 },\n  });\n  const after1 = interpolate(t, [HIT + 4, HIT + 22], [0, 1], {\n    ...CLAMP,\n    easing: EASE_OUT,\n  });\n  const push = interpolate(t, [0, HIT + 54], [0, 1], {\n    ...CLAMP,\n    easing: EASE_IO,\n  });\n\n  const closer = interpolate(t, [MORPH[0] + 16, HIT + 44], [0, 1], {\n    ...CLAMP,\n    easing: EASE_IO,\n  });\n  const zoom = 1 + push * 0.025 + closer * 0.16;\n  const pitch = (R - L) / BINS;\n  const barW = pitch * 0.56;\n  const bars = Array.from({ length: BINS }, (_, i) => {\n    const v = ((i + 0.5) / BINS) * axisMax;\n    const rise = interpolate(t, [RISE + i * 0.3, RISE + i * 0.3 + 16], [0, 1], {\n      ...CLAMP,\n      easing: EASE_OUT,\n    });\n    const h = now(v) * rise;\n    const x = L + i * pitch + (pitch - barW) / 2;\n    const tail = v > markerV;\n    return { key: i, x, h, tail };\n  });\n\n  const samples = 260;\n  const path = (fn: (v: number) => number, k: number) =>\n    Array.from({ length: samples + 1 }, (_, i) => {\n      const v = (i / samples) * axisMax * k;\n      return `${i ? \"L\" : \"M\"}${xOf(v).toFixed(2)} ${(base - fn(v)).toFixed(2)}`;\n    }).join(\" \");\n  const strokeK = interpolate(t, [RISE + 2, RISE + 40], [0, 1], {\n    ...CLAMP,\n    easing: Easing.bezier(0.4, 0, 0.2, 1),\n  });\n  const ghostMarkX = xOf(before);\n  const ghostTop = base - (base - top) * 0.5;\n  const markTop = top - 12 * u;\n  const drop = Math.round((1 - after / before) * 100);\n  const modeX = xOf(\n    Math.exp(\n      lerp(sb.mu, sa.mu, morph) - lerp(SIGMA_BEFORE, SIGMA_AFTER, morph) ** 2,\n    ),\n  );\n  const glowX = ((width * 0.3 + (modeX - width * 0.3) * zoom) / width) * 100;\n  const heroScale = 1 + 0.04 * (1 - kick) * (t >= HIT ? 1 : 0);\n\n  return (\n    <AbsoluteFill style={{ background: p.bg, overflow: \"hidden\" }}>\n      <AbsoluteFill\n        style={{\n          background: `radial-gradient(${16 + 14 * (1 - morph)}% ${46 - 6 * morph}% at ${glowX}% 74%, ${p.glow}, transparent 70%)`,\n          opacity: 0.2 + 0.8 * morph,\n        }}\n      />\n      <AbsoluteFill\n        style={{\n          transform: `scale(${zoom})`,\n          transformOrigin: \"30% 70%\",\n        }}\n      >\n        <svg\n          width={width}\n          height={height}\n          style={{ position: \"absolute\", inset: 0 }}\n          aria-hidden\n        >\n          <defs>\n            <linearGradient\n              id={gradId}\n              gradientUnits=\"userSpaceOnUse\"\n              x1={0}\n              y1={top - 16 * u}\n              x2={0}\n              y2={base}\n            >\n              <stop offset=\"0\" stopColor={stops[0]} />\n              <stop offset=\"0.42\" stopColor={stops[1]} />\n              <stop offset=\"1\" stopColor={stops[2]} />\n            </linearGradient>\n          </defs>\n          <path\n            d={`${path(now, 1)} L ${xOf(axisMax).toFixed(2)} ${base} L ${L} ${base} Z`}\n            fill={`url(#${gradId})`}\n            opacity={p.area * strokeK}\n          />\n          {bars.map((b) =>\n            b.h > 0.2 ? (\n              <rect\n                key={b.key}\n                x={b.x}\n                y={base - b.h}\n                width={barW}\n                height={b.h}\n                rx={Math.min(barW / 2, 1.5 * u)}\n                fill={`url(#${gradId})`}\n                opacity={b.tail ? 0.32 : 0.9}\n              />\n            ) : null,\n          )}\n\n          <path\n            d={path(was, 1)}\n            fill=\"none\"\n            stroke={p.ghost}\n            strokeWidth={hw}\n            strokeDasharray={`${3 * u} ${4 * u}`}\n            opacity={ghostO}\n          />\n          <path\n            d={path(now, strokeK)}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={2 * u}\n            strokeLinejoin=\"round\"\n            strokeLinecap=\"round\"\n          />\n\n          <line\n            x1={L}\n            y1={base}\n            x2={lerp(L, R, axisK)}\n            y2={base}\n            stroke={p.axis}\n            strokeWidth={hw}\n          />\n          {ticks.map((v, i) => {\n            const a = interpolate(t, [4 + i * 2, 14 + i * 2], [0, 1], CLAMP);\n            return (\n              <line\n                key={v}\n                x1={xOf(v)}\n                y1={base}\n                x2={xOf(v)}\n                y2={base + 6 * u}\n                stroke={p.axis}\n                strokeWidth={hw}\n                opacity={a}\n              />\n            );\n          })}\n\n          <line\n            x1={ghostMarkX}\n            y1={base}\n            x2={ghostMarkX}\n            y2={ghostTop}\n            stroke={p.ghost}\n            strokeWidth={hw}\n            strokeDasharray={`${3 * u} ${4 * u}`}\n            opacity={ghostO}\n          />\n          <line\n            x1={markerX}\n            y1={base}\n            x2={markerX}\n            y2={lerp(base, markTop, markK)}\n            stroke={p.fg}\n            strokeWidth={hw * 1.2}\n            opacity={markK > 0 ? 1 : 0}\n          />\n          <circle\n            cx={markerX}\n            cy={base}\n            r={3.6 * u}\n            fill={p.bg}\n            stroke={p.fg}\n            strokeWidth={hw * 1.4}\n            opacity={markK}\n          />\n        </svg>\n\n        {ticks.map((v, i) => {\n          const a = interpolate(t, [4 + i * 2, 16 + i * 2], [0, 1], {\n            ...CLAMP,\n            easing: EASE_OUT,\n          });\n          return (\n            <div\n              key={v}\n              style={{\n                position: \"absolute\",\n                left: xOf(v) - 60 * u,\n                width: 120 * u,\n                top: base + 14 * u,\n                textAlign: \"center\",\n                fontFamily: mono,\n                fontWeight: 400,\n                fontSize: 12 * u,\n                color: p.muted,\n                fontVariantNumeric: \"tabular-nums\",\n                opacity: a,\n                transform: `translateY(${(1 - a) * 5 * u}px)`,\n              }}\n            >\n              {v.toLocaleString(\"en-US\")}\n              {i === ticks.length - 1 ? ` ${unit}` : \"\"}\n            </div>\n          );\n        })}\n\n        <div\n          style={{\n            position: \"absolute\",\n            left: ghostMarkX + 8 * u,\n            top: ghostTop - 4 * u,\n            fontFamily: mono,\n            fontWeight: 400,\n            fontSize: 12 * u,\n            color: p.muted,\n            fontVariantNumeric: \"tabular-nums\",\n            opacity: ghostO,\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {before.toLocaleString(\"en-US\")}\n          {unit}\n        </div>\n      </AbsoluteFill>\n\n      <div\n        style={{\n          position: \"absolute\",\n          left: width * 0.3 + (markerX - width * 0.3) * zoom + 14 * u,\n          top: height * 0.7 + (markTop - height * 0.7) * zoom - 4 * u,\n          opacity: tagIn,\n          transform: `translateY(${(1 - tagIn) * 10 * u}px)`,\n        }}\n      >\n        <div\n          style={{\n            fontFamily: mono,\n            fontWeight: 400,\n            fontSize: 13 * u,\n            letterSpacing: \"0.08em\",\n            textTransform: \"uppercase\",\n            color: p.muted,\n            marginBottom: 12 * u,\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          {label}\n        </div>\n        <div\n          style={{\n            transform: `scale(${heroScale})`,\n            transformOrigin: \"0% 50%\",\n          }}\n        >\n          <Readout\n            value={markerV}\n            unit={unit}\n            size={104 * u}\n            color={p.fg}\n            unitColor={p.muted}\n          />\n        </div>\n        <div\n          style={{\n            marginTop: 14 * u,\n            display: \"flex\",\n            alignItems: \"baseline\",\n            gap: 10 * u,\n            fontFamily: sans,\n            fontWeight: 400,\n            fontSize: 20 * u,\n            fontVariantNumeric: \"tabular-nums\",\n            opacity: after1,\n            transform: `translateY(${(1 - after1) * 8 * u}px)`,\n            whiteSpace: \"nowrap\",\n          }}\n        >\n          <span style={{ color: p.muted }}>\n            from {before.toLocaleString(\"en-US\")}\n            {unit}\n          </span>\n          <span style={{ color: p.delta, fontWeight: 500 }}>\n            {drop > 0 ? \"−\" : \"+\"}\n            {Math.abs(drop)}%\n          </span>\n        </div>\n      </div>\n\n      <AbsoluteFill\n        style={{\n          background: `radial-gradient(ellipse 85% 85% at 50% 50%, transparent 64%, ${p.bg} 100%)`,\n          opacity: 0.55,\n        }}\n      />\n      <Grain opacity={p.grain} />\n    </AbsoluteFill>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/distribution-shift.tsx"
    }
  ],
  "type": "registry:component"
}