"use client";
import {
  animate,
  motionValue,
  m,
  useTransform,
  useSpring,
} from "motion/react";
import { useEffect, useMemo, useRef } from "react";

export const Seo = () => {
  const x = useMemo(() => motionValue(0), []);
  const hasAnimated = useRef(false);

  useEffect(() => {
    if (!hasAnimated.current) {
      hasAnimated.current = true;
      animate(x, 100, { duration: 0.9 });
    }
  }, [x]);
  const number = useTransform(x, (v) => Number(v.toFixed(0)));
  const springX = useSpring(x, { damping: 40 });
  const dx = useTransform(springX, (v) => `${v / 100}px 1px`);

  return (
    <m.div
      whileInView="visible"
      viewport={{ once: true }}
      initial={{
        boxShadow: "none",
      }}
      animate={{
        boxShadow:
          "0 2.0155254638171756px 1.6124203710537404px -.34375px #0099ff24,0 4.777151241141837px 3.8217209929134697px -.6875px #0099ff23,0 8.714017655176574px 6.971214124141261px -1.03125px #0099ff23,0 14.487036858627107px 11.589629486901686px -1.375px #09f2,0 23.395383266347928px 18.71630661307834px -1.71875px #09f2,0 38.29592112890677px 30.636736903125417px -2.0625px #0099ff21,0 65.94299011604161px 52.7543920928333px -2.40625px #0099ff20,0 120px 96px -2.75px #0099ff1d",
      }}
      transition={{ delay: 2.3, duration: 0.6 }}
      className="w-fit h-fit rounded-full p-2 bg-cyan-600 relative flex items-center justify-center"
    >
      <svg
        width="150"
        height="150"
        viewBox="0 0 150 150"
        className="-rotate-90"
        fill="none"
      >
        <m.circle
          cx="75"
          cy="75"
          r="70"
          strokeWidth={"0.5rem"}
          pathLength="0.99"
          strokeDashoffset={"0px"}
          className="stroke-white"
          strokeDasharray={dx}
        />
      </svg>
      <m.div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl font-bold text-white">
        {number}
      </m.div>
    </m.div>
  );
};

export default Seo;
Circular Progress
