{
  "name": "animated-number-in-view",
  "type": "registry:ui",
  "componentName": "animated-number-in-view",
  "description": "Animated number that activates when scrolled into view.",
  "files": [
    {
      "path": "animated-number-in-view.tsx",
      "content": "'use client';\nimport { AnimatedNumber } from '@/components/core/animated-number';\nimport { useInView } from 'motion/react';\nimport { useRef, useState } from 'react';\n\nexport function AnimatedNumberInView() {\n  const [value, setValue] = useState(0);\n  const ref = useRef(null);\n  const isInView = useInView(ref);\n\n  if (isInView && value === 0) {\n    setValue(10000);\n  }\n\n  return (\n    <div className='flex w-full items-center justify-center' ref={ref}>\n      <AnimatedNumber\n        className='inline-flex items-center font-mono text-2xl font-light text-zinc-800 dark:text-zinc-50'\n        springOptions={{\n          bounce: 0,\n          duration: 10000,\n        }}\n        value={value}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/animated-number.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { motion, SpringOptions, useSpring, useTransform } from 'motion/react';\nimport React, { useEffect } from 'react';\n\nexport type AnimatedNumberProps = {\n  value: number;\n  className?: string;\n  springOptions?: SpringOptions;\n  as?: React.ElementType;\n};\n\nexport function AnimatedNumber({\n  value,\n  className,\n  springOptions,\n  as = 'span',\n}: AnimatedNumberProps) {\n  const MotionComponent = motion.create(\n    as as string | React.ComponentType<unknown>\n  ) as typeof motion.span;\n\n  const spring = useSpring(value, springOptions);\n  const display = useTransform(spring, (current) =>\n    Math.round(current).toLocaleString()\n  );\n\n  useEffect(() => {\n    spring.set(value);\n  }, [spring, value]);\n\n  return (\n    <MotionComponent className={cn('tabular-nums', className)}>\n      {display}\n    </MotionComponent>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}