InfinityFlow

"use client";

import { motion, useReducedMotion } from "motion/react";

type InfinityFlowProps = {
  className?: string;
  color?: string;
  /** Loader width in pixels; height is half of it. */
  size?: number;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
  /** Read out by screen readers. */
  label?: string;
};

// Figure-eight in a 100 x 50 box.
const PATH = "M50 25 C62 8 88 8 88 25 C88 42 62 42 50 25 C38 8 12 8 12 25 C12 42 38 42 50 25 Z";

/* InfinityFlow: a glowing streak runs endlessly along a figure-eight track. */
export function InfinityFlow({
  className = "",
  color = "#a78bfa",
  size = 96,
  speed = 1,
  label = "Loading",
}: InfinityFlowProps) {
  const reduce = useReducedMotion();
  const flow = { duration: (reduce ? 8 : 2) / speed, repeat: Infinity, ease: "linear" as const };

  return (
    <div role="status" className={`inline-block ${className}`} style={{ width: size, height: size / 2 }}>
      <span className="sr-only">{label}</span>
      <svg aria-hidden viewBox="0 0 100 50" className="h-full w-full overflow-visible">
        <path d={PATH} fill="none" stroke={color} strokeOpacity={0.15} strokeWidth={5} />
        <motion.path
          d={PATH}
          fill="none"
          stroke={color}
          strokeWidth={5}
          strokeLinecap="round"
          pathLength={1}
          strokeDasharray="0.28 0.72"
          style={{ filter: `drop-shadow(0 0 3px ${color})` }}
          initial={{ strokeDashoffset: 0 }}
          animate={{ strokeDashoffset: -1 }}
          transition={flow}
        />
      </svg>
    </div>
  );
}