Pushing project code

components/Counter.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from 'react';
+import { motion, useInView, useSpring, useTransform } from 'framer-motion';
+
+interface CounterProps {
+    value: number;
+}
+
+const Counter: React.FC<CounterProps> = ({ value }) => {
+    const ref = useRef(null);
+    const isInView = useInView(ref, { once: true, margin: "-20%" });
+    // Using slow/heavy physics as requested for premium feel
+    const spring = useSpring(0, { mass: 3, stiffness: 75, damping: 30 });
+
+    const display = useTransform(spring, (current) =>
+        // formatting: if decimal exists in target, show 1 decimal, else integer
+        value % 1 !== 0 ? current.toFixed(1) : Math.round(current).toLocaleString()
+    );
+
+    useEffect(() => {
+        if (isInView) {
+            spring.set(value);
+        }
+    }, [isInView, value, spring]);
+
+    return <motion.span ref={ref}>{display}</motion.span>;
+};
+
+export default Counter;