{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metric-ticker-board",
  "type": "registry:component",
  "title": "Metric ticker board",
  "description": "A four cell metric board where each number counts up from zero with an eased tween when it enters the viewport, with optional suffixes like plus or %.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/metric-ticker-board.tsx",
      "type": "registry:ui",
      "target": "components/ui/metric-ticker-board.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion, animate } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nfunction useCount(to: number, play: boolean) {\n  const [v, setV] = React.useState(0)\n  React.useEffect(() => {\n    if (!play) { setV(to); return }\n    const controls = animate(0, to, {\n      duration: 1.1,\n      ease: [0.2, 0, 0, 1],\n      onUpdate: (n) => setV(Math.round(n)),\n    })\n    return () => controls.stop()\n  }, [to, play])\n  return v\n}\n\nfunction MetricCell({ label, value, suffix = \"\" }: { label: string; value: number; suffix?: string }) {\n  const reduce = useReducedMotion()\n  const ref = React.useRef<HTMLDivElement>(null)\n  const [play, setPlay] = React.useState(!!reduce)\n  React.useEffect(() => {\n    if (reduce) return\n    const el = ref.current\n    if (!el) return\n    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) setPlay(true) }, { threshold: 0.4 })\n    io.observe(el)\n    return () => io.disconnect()\n  }, [reduce])\n  const n = useCount(value, play)\n  return (\n    <div ref={ref} className=\"rounded-2xl border border-border bg-surface p-5 shadow-highlight\">\n      <p className=\"text-[11px] font-medium uppercase tracking-[0.01em] text-fg-muted\">{label}</p>\n      <p className=\"mt-2 text-3xl font-medium tabular-nums tracking-[-0.022em] text-fg\">\n        {n}{suffix}\n      </p>\n    </div>\n  )\n}\n\nfunction MetricTickerBoard({ className }: { className?: string }) {\n  return (\n    <section data-slot=\"metric-ticker-board\" data-tier=\"premium\" className={cn(\"grid gap-3 sm:grid-cols-2 lg:grid-cols-4\", className)}>\n      <MetricCell label=\"Registry items\" value={460} suffix=\"+\" />\n      <MetricCell label=\"Motion pieces\" value={71} />\n      <MetricCell label=\"Gallery routes\" value={52} />\n      <MetricCell label=\"A11y gate\" value={100} suffix=\"%\" />\n    </section>\n  )\n}\nexport { MetricTickerBoard }\n"
    }
  ]
}