{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-ticker",
  "type": "registry:ui",
  "title": "Number Ticker",
  "description": "Animate numbers to count up or down to a target number",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/number-ticker.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useRef, type ComponentPropsWithoutRef } from \"react\"\nimport { useInView, useMotionValue, useSpring } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface NumberTickerProps extends ComponentPropsWithoutRef<\"span\"> {\n  value: number\n  startValue?: number\n  direction?: \"up\" | \"down\"\n  delay?: number\n  decimalPlaces?: number\n}\n\nexport function NumberTicker({\n  value,\n  startValue = 0,\n  direction = \"up\",\n  delay = 0,\n  className,\n  decimalPlaces = 0,\n  ...props\n}: NumberTickerProps) {\n  const ref = useRef<HTMLSpanElement>(null)\n  const motionValue = useMotionValue(direction === \"down\" ? value : startValue)\n  const springValue = useSpring(motionValue, {\n    damping: 60,\n    stiffness: 100,\n  })\n  const isInView = useInView(ref, { once: true, margin: \"0px\" })\n\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout> | null = null\n\n    if (isInView) {\n      timer = setTimeout(() => {\n        motionValue.set(direction === \"down\" ? startValue : value)\n      }, delay * 1000)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [motionValue, isInView, delay, value, direction, startValue])\n\n  useEffect(\n    () =>\n      springValue.on(\"change\", (latest) => {\n        if (ref.current) {\n          ref.current.textContent = Intl.NumberFormat(\"en-US\", {\n            minimumFractionDigits: decimalPlaces,\n            maximumFractionDigits: decimalPlaces,\n          }).format(Number(latest.toFixed(decimalPlaces)))\n        }\n      }),\n    [springValue, decimalPlaces]\n  )\n\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        \"inline-block tracking-wider text-black tabular-nums dark:text-white\",\n        className\n      )}\n      {...props}\n    >\n      {startValue}\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}