spb/ora-ka Public

1import { useEffect, useState } from 'react'2import { formatInt } from '../api'34/**5 * Animated integer tick-up (900 ms ease-out cubic).6 * Respects prefers-reduced-motion by jumping straight to the value.7 */8export default function CountUp({ value }: { value: number }) {9  const [display, setDisplay] = useState(0)1011  useEffect(() => {12    if (13      typeof window.matchMedia === 'function' &&14      window.matchMedia('(prefers-reduced-motion: reduce)').matches15    ) {16      setDisplay(value)17      return18    }19    let raf = 020    const duration = 90021    const start = performance.now()22    const tick = (now: number) => {23      const p = Math.min(1, (now - start) / duration)24      const eased = 1 - Math.pow(1 - p, 3)25      setDisplay(Math.round(value * eased))26      if (p < 1) raf = requestAnimationFrame(tick)27    }28    raf = requestAnimationFrame(tick)29    return () => cancelAnimationFrame(raf)30  }, [value])3132  return <>{formatInt(display)}</>33}34