{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-ticker",
  "type": "registry:ui",
  "title": "Number Ticker",
  "description": "Spring-animated counting number.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/starkui/number-ticker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { useInView, useMotionValue, useSpring } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function NumberTicker({\n  value,\n  duration = 1.2,\n  className,\n}: {\n  value: number;\n  duration?: number;\n  className?: string;\n}) {\n  const ref = React.useRef<HTMLSpanElement>(null);\n  const motionValue = useMotionValue(0);\n  const spring = useSpring(motionValue, {\n    duration: duration * 1000,\n    bounce: 0,\n  });\n  const inView = useInView(ref, { once: true });\n\n  React.useEffect(() => {\n    if (inView) motionValue.set(value);\n  }, [inView, value, motionValue]);\n\n  React.useEffect(\n    () =>\n      spring.on(\"change\", (v) => {\n        if (ref.current)\n          ref.current.textContent = Intl.NumberFormat().format(Math.round(v));\n      }),\n    [spring]\n  );\n\n  return (\n    <span ref={ref} className={cn(\"tabular-nums\", className)}>\n      0\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/number-ticker.tsx"
    }
  ]
}