Replace countup with CSS animations

Set up to render final values statically, then reset to 1 when
hydrating, then animate to the final result.

Author: pimterry

package-lock.json

@@ -53,7 +53,6 @@
     "posthog-js": "^1.359.1",
     "prismjs": "^1.27.0",
     "react": "^18.2.0",
-    "react-countup": "^6.5.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.4",
     "react-intersection-observer": "^9.8.2",

package.json

@@ -1,35 +1,67 @@
 'use client';
 
-import CountUp from 'react-countup';
-
-import { useMounted } from '@/lib/hooks/use-mounted';
+import { useRef, useEffect, useState, useCallback } from 'react';
 
 interface NumberIncreaserProps {
   maxValue: number;
   suffix?: string;
 }
 
-// t: current time, b: beginning value, c: change in value, d: duration
-const linearEasing = (t: number, b: number, c: number, d: number): number =>
-  c * t / d + b;
-
-export const NumberIncreaser = ({ maxValue, suffix }: NumberIncreaserProps) => {
-  const isMounted = useMounted();
-
-  if (!isMounted) {
-    return <>{maxValue}</>;
-  }
-
-  return <CountUp
-    scrollSpyOnce
-    scrollSpyDelay={250}
-    enableScrollSpy
-    duration={3}
-    start={1}
-    end={maxValue}
-    suffix={suffix}
-    easingFn={linearEasing}
-  >
-    {({ countUpRef }) => <span ref={countUpRef} />}
-  </CountUp>
+const DURATION = 3000; // 3 seconds
+const SCROLL_SPY_DELAY = 250; // ms
+
+export const NumberIncreaser = ({ maxValue, suffix = '' }: NumberIncreaserProps) => {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [hasAnimated, setHasAnimated] = useState(false);
+
+  const animate = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    el.textContent = 1 + suffix;
+    const start = performance.now();
+
+    const tick = (now: number) => {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / DURATION, 1);
+      // Linear easing from 1 to maxValue
+      const value = Math.round(1 + (maxValue - 1) * progress);
+      el.textContent = value + suffix;
+
+      if (progress < 1) {
+        requestAnimationFrame(tick);
+      }
+    };
+
+    requestAnimationFrame(tick);
+  }, [maxValue, suffix]);
+
+  // Reset to 1 immediately on hydration, before the user scrolls to it
+  useEffect(() => {
+    const el = ref.current;
+    if (el) el.textContent = 1 + suffix;
+  }, [suffix]);
+
+  useEffect(() => {
+    if (hasAnimated) return;
+
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          observer.disconnect();
+          setHasAnimated(true);
+          setTimeout(animate, SCROLL_SPY_DELAY);
+        }
+      },
+      { threshold: 0 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [hasAnimated, animate]);
+
+  return <span ref={ref}>{maxValue}{suffix}</span>;
 };