Progress ring

import { useEffect } from 'react';
import {
  animate,
  motion,
  useMotionValue,
  useReducedMotion,
  useTransform
} from 'motion/react';

const SIZE = 120;
const STROKE = 10;
const RADIUS = (SIZE - STROKE) / 2;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;

type Props = { value: number; label: string };

export function ProgressRing({ value, label }: Props) {
  const reduceMotion = useReducedMotion();
  const progress = useMotionValue(0);
  // An offset of the full circumference hides the dash; 0 shows the whole ring.
  const offset = useTransform(progress, (v) => CIRCUMFERENCE * (1 - v / 100));
  const percent = useTransform(progress, (v) => `${Math.round(v)}%`);

  useEffect(() => {
    const controls = animate(progress, value, {
      duration: reduceMotion ? 0 : 0.6,
      ease: 'easeOut'
    });
    return () => controls.stop();
  }, [progress, value, reduceMotion]);

  return (
    <div
      role='progressbar'
      aria-label={label}
      aria-valuenow={value}
      aria-valuemin={0}
      aria-valuemax={100}
      className='relative grid size-30 place-items-center'
    >
      {/* Rotated so the arc starts at 12 o’clock instead of 3. */}
      <svg
        viewBox={`0 0 ${SIZE} ${SIZE}`}
        aria-hidden='true'
        className='absolute inset-0 -rotate-90 fill-none'
      >
        <circle
          cx={SIZE / 2}
          cy={SIZE / 2}
          r={RADIUS}
          strokeWidth={STROKE}
          className='stroke-muted'
        />
        <motion.circle
          cx={SIZE / 2}
          cy={SIZE / 2}
          r={RADIUS}
          strokeWidth={STROKE}
          strokeLinecap='round'
          strokeDasharray={CIRCUMFERENCE}
          style={{ strokeDashoffset: offset }}
          className='stroke-blue-500'
        />
      </svg>
      <motion.span className='text-2xl font-semibold tabular-nums'>
        {percent}
      </motion.span>
    </div>
  );
}