GlowSphere

"use client";

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

type GlowSphereProps = {
  children?: ReactNode;
  className?: string;
  color?: string;
  background?: string;
  /** Sphere width in pixels. */
  size?: number;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
};

/* GlowSphere: a lit sphere with a sheen turning across it and a glow that breathes around it. */
export function GlowSphere({
  children,
  className = "",
  color = "#a78bfa",
  background = "#06050d",
  size = 200,
  speed = 1,
}: GlowSphereProps) {
  const reduce = useReducedMotion();
  const shade = `radial-gradient(circle at 35% 30%, #ffffff 0%, ${color} 22%, color-mix(in srgb, ${color} 35%, #000) 62%, #000 100%)`;
  const sheen = "conic-gradient(from 0deg, transparent, rgba(255,255,255,0.45) 8%, transparent 22%, transparent 55%, rgba(255,255,255,0.25) 65%, transparent 78%)";

  return (
    <div className={`relative overflow-hidden ${className}`} style={{ background }}>
      <motion.div
        aria-hidden
        className="absolute inset-0 m-auto rounded-full blur-[60px]"
        style={{ width: size * 1.5, height: size * 1.5, background: color }}
        animate={reduce ? { opacity: 0.45 } : { opacity: [0.3, 0.6, 0.3], scale: [0.95, 1.08, 0.95] }}
        transition={{ duration: 5 / speed, repeat: Infinity, ease: "easeInOut" }}
      />
      <div
        aria-hidden
        className="absolute inset-0 m-auto overflow-hidden rounded-full"
        style={{ width: size, height: size, background: shade }}
      >
        <motion.div
          className="absolute -inset-1/4 mix-blend-overlay"
          style={{ background: sheen }}
          animate={reduce ? undefined : { rotate: 360 }}
          transition={{ duration: 16 / speed, repeat: Infinity, ease: "linear" }}
        />
      </div>
      <div className="relative h-full">{children}</div>
    </div>
  );
}