GradientOrbit

"use client";

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

type GradientOrbitProps = {
  children?: ReactNode;
  className?: string;
  /** One colour per orb. */
  colors?: [string, string, string];
  background?: string;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
};

// Where each orb sits before its ring turns; rings turn at different speeds and directions.
const ORBS = [
  { left: "50%", top: "8%", d: 22, dir: 1 },
  { left: "8%", top: "40%", d: 30, dir: -1 },
  { left: "38%", top: "55%", d: 38, dir: 1 },
];

/* GradientOrbit: three soft colour orbs circle the centre on their own rings, blending as they pass. */
export function GradientOrbit({
  children,
  className = "",
  colors = ["#a78bfa", "#22d3ee", "#f472b6"],
  background = "#07060f",
  speed = 1,
}: GradientOrbitProps) {
  const reduce = useReducedMotion();

  return (
    <div className={`relative overflow-hidden ${className}`} style={{ background }}>
      {ORBS.map((o, i) => (
        <motion.div
          key={i}
          aria-hidden
          className="absolute inset-0"
          animate={reduce ? undefined : { rotate: 360 * o.dir }}
          transition={{ duration: o.d / speed, repeat: Infinity, ease: "linear" }}
        >
          <div
            className="absolute aspect-square w-[38%] rounded-full opacity-70 blur-[50px]"
            style={{ left: o.left, top: o.top, background: colors[i] }}
          />
        </motion.div>
      ))}
      <div className="relative h-full">{children}</div>
    </div>
  );
}