MorphSpinner

"use client";

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

type MorphSpinnerProps = {
  className?: string;
  color?: string;
  /** Second colour the shape blends into. */
  accent?: string;
  /** Loader width in pixels. */
  size?: number;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
  /** Read out by screen readers. */
  label?: string;
};

/* MorphSpinner: one shape turns while it melts from square to circle to leaf and back, shifting colour. */
export function MorphSpinner({
  className = "",
  color = "#a78bfa",
  accent = "#f472b6",
  size = 56,
  speed = 1,
  label = "Loading",
}: MorphSpinnerProps) {
  const reduce = useReducedMotion();

  return (
    <div role="status" className={`inline-grid place-items-center ${className}`} style={{ width: size, height: size }}>
      <span className="sr-only">{label}</span>
      <motion.span
        aria-hidden
        className="block"
        style={{ width: size * 0.7, height: size * 0.7 }}
        animate={
          reduce
            ? { backgroundColor: [color, accent, color] }
            : {
                rotate: [0, 90, 180, 270, 360],
                borderRadius: ["18%", "50%", "50% 0%", "50%", "18%"],
                backgroundColor: [color, accent, color, accent, color],
                scale: [1, 0.85, 1, 0.85, 1],
              }
        }
        transition={{ duration: (reduce ? 4 : 2.4) / speed, repeat: Infinity, ease: "easeInOut" }}
      />
    </div>
  );
}