{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-ticker",
  "type": "registry:block",
  "title": "Number ticker",
  "description": "Number ticker",
  "files": [
    {
      "path": "components/usages/numbertickerusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport NumberTicker from \"@/registry/open-source/number-ticker\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<NumberTicker\r\n\t\t\t\tvalue={100}\r\n\t\t\t\tclassName=\"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-secondary dark:text-secondary\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/numbertickerusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport NumberTicker from \"@/registry/open-source/number-ticker\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<NumberTicker\r\n\t\t\t\tvalue={100}\r\n\t\t\t\tclassName=\"whitespace-pre-wrap text-8xl font-medium tracking-tighter text-secondary dark:text-secondary\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/number-ticker.tsx",
      "content": "\"use client\";\r\n\r\nimport { useEffect, useRef } from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { useInView, useMotionValue, useSpring } from \"motion/react\";\r\n\r\n// https://magicui.design/docs/components/number-ticker\r\n\r\nexport default function NumberTicker({\r\n\tvalue,\r\n\tdirection = \"up\",\r\n\tdelay = 0,\r\n\tclassName,\r\n}: {\r\n\tvalue: number;\r\n\tdirection?: \"up\" | \"down\";\r\n\tclassName?: string;\r\n\tdelay?: number; // delay in s\r\n}) {\r\n\tconst ref = useRef<HTMLSpanElement>(null);\r\n\tconst motionValue = useMotionValue(direction === \"down\" ? value : 0);\r\n\tconst springValue = useSpring(motionValue, {\r\n\t\tdamping: 30,\r\n\t\tstiffness: 100,\r\n\t});\r\n\tconst isInView = useInView(ref, { once: true, margin: \"0px\" });\r\n\r\n\tuseEffect(() => {\r\n\t\tisInView &&\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tmotionValue.set(direction === \"down\" ? 0 : value);\r\n\t\t\t}, delay * 1000);\r\n\t}, [motionValue, isInView, delay, value, direction]);\r\n\r\n\tuseEffect(\r\n\t\t() =>\r\n\t\t\tspringValue.on(\"change\", (latest) => {\r\n\t\t\t\tif (ref.current) {\r\n\t\t\t\t\tref.current.textContent = Intl.NumberFormat(\"en-US\").format(\r\n\t\t\t\t\t\tNumber(latest.toFixed(0))\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t}),\r\n\t\t[springValue]\r\n\t);\r\n\r\n\treturn (\r\n\t\t<span className={cn(\"inline-block tabular-nums\", className)} ref={ref} />\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}