Function Counter

src/showcase/components/text/text-ticker/Counter.tsx:6–40

({
  value,
  direction = 'up',
}: {
  value: number
  direction?: 'up' | 'down'
})

import { useInView, useMotionValue, useSpring } from 'framer-motion'

export default function Counter({
  value,
  direction = 'up',
}: {
  value: number
  direction?: 'up' | 'down'
}) {
  const ref = useRef<HTMLSpanElement>(null)
  const motionValue = useMotionValue(direction === 'down' ? value : 0)
  const springValue = useSpring(motionValue, {
    damping: 100,
    stiffness: 100,
  })
  const isInView = useInView(ref, { once: true, margin: '-100px' })

  useEffect(() => {
    if (isInView) {
      motionValue.set(direction === 'down' ? 0 : value)
    }
  }, [motionValue, isInView, value, direction])

  useEffect(
    () =>
      springValue.on('change', (latest) => {
        if (ref.current) {
          ref.current.textContent = Intl.NumberFormat('en-US').format(
            latest.toFixed(0),
          )
        }
      }),
    [springValue],
  )

  return <span ref={ref} />
}