LiquidLoop

"use client";

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

type LiquidLoopProps = {
  className?: string;
  color?: 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;
};

/* LiquidLoop: drops chase each other round a circle and melt together where they meet (SVG goo filter). */
export function LiquidLoop({
  className = "",
  color = "#a78bfa",
  size = 72,
  speed = 1,
  label = "Loading",
}: LiquidLoopProps) {
  const reduce = useReducedMotion();
  const filterId = `goo-${useId().replace(/:/g, "")}`;
  const drops = [0.34, 0.26, 0.2, 0.15];

  return (
    <div role="status" className={`relative inline-block ${className}`} style={{ width: size, height: size }}>
      <span className="sr-only">{label}</span>
      <svg aria-hidden className="absolute h-0 w-0">
        <filter id={filterId}>
          <feGaussianBlur in="SourceGraphic" stdDeviation={size / 14} result="blur" />
          <feColorMatrix in="blur" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8" />
        </filter>
      </svg>
      <div aria-hidden className="absolute inset-0" style={{ filter: `url(#${filterId})` }}>
        {drops.map((d, i) => (
          <motion.span
            key={d}
            className="absolute inset-0"
            animate={{ rotate: 360 }}
            transition={{
              duration: (reduce ? 6 : 1.5) / speed,
              repeat: Infinity,
              ease: [0.6, 0.1, 0.4, 0.9],
              delay: (i * 0.09) / speed,
            }}
          >
            <span
              className="absolute left-1/2 rounded-full"
              style={{ width: size * d, height: size * d, top: size * 0.08, marginLeft: (-size * d) / 2, background: color }}
            />
          </motion.span>
        ))}
      </div>
    </div>
  );
}