{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "counter-animation",
  "type": "registry:component",
  "title": "Counter Animation",
  "author": "Toby Belhome",
  "description": "Enhance user experience with count animation, dynamically animating numbers to draw attention to key data points.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "http://localhost:3000/r/counter-animation.json"
  ],
  "files": [
    {
      "path": "examples/motion/components/counter-animation/01/counter-animation.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { useMotionValue, useTransform, animate, useMotionValueEvent } from \"motion/react\";\n\ntype Props = {\n  number: number;\n  className?: string;\n  prefix?: string;\n  suffix?: string;\n};\n\nexport default function CounterAnimation({ number, className, prefix, suffix }: Props) {\n  const count = useMotionValue(0);\n  const rounded = useTransform(count, Math.round);\n  const [current, setCurrent] = React.useState(0);\n\n  React.useEffect(() => {\n    const animation = animate(count, number, { duration: 2 });\n    return animation.stop;\n  }, [count, number]);\n\n  useMotionValueEvent(rounded, \"change\", (latest) => {\n    setCurrent(latest);\n  });\n\n  return (\n    <span className={cn(className)}>\n      {prefix}\n      {current}\n      {suffix}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/counter-animation/counter-animation.tsx"
    },
    {
      "path": "examples/motion/components/counter-animation/01/page.tsx",
      "content": "import CounterAnimation from \"./counter-animation\";\n\nexport default function CounterExample() {\n  return <CounterAnimation number={60} className=\"text-2xl font-semibold lg:text-5xl\" />;\n}\n",
      "type": "registry:component",
      "target": "components/counter-animation/counter-animation-example.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}