AuroraField

"use client";

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

type AuroraFieldProps = {
  children?: ReactNode;
  className?: string;
  /** The two drifting colours. */
  colors?: [string, string];
  background?: string;
  /** Fine grid lines over the colour. */
  grid?: boolean;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
};

/* AuroraField: two slow colour fields under a fine grid. */
export function AuroraField({
  children,
  className = "",
  colors = ["#1fd1a5", "#ff7a45"],
  background = "#050712",
  grid = true,
  speed = 1,
}: AuroraFieldProps) {
  const reduce = useReducedMotion();
  const loop = (seconds: number) => ({ duration: seconds / speed, repeat: Infinity, ease: "easeInOut" as const });

  return (
    <div className={`relative overflow-hidden ${className}`} style={{ background }}>
      <motion.div
        aria-hidden
        className="absolute left-[10%] top-[5%] h-2/3 w-2/3 rounded-full opacity-60 blur-[70px]"
        style={{ background: colors[0] }}
        animate={reduce ? undefined : { x: ["-10%", "20%", "-10%"], y: ["-10%", "15%", "-10%"], scale: [1, 1.25, 1] }}
        transition={loop(14)}
      />
      <motion.div
        aria-hidden
        className="absolute bottom-0 right-[5%] h-2/3 w-1/2 rounded-full opacity-50 blur-[80px]"
        style={{ background: colors[1] }}
        animate={reduce ? undefined : { x: ["15%", "-20%", "15%"], y: ["10%", "-5%", "10%"], scale: [1.1, 0.9, 1.1] }}
        transition={loop(18)}
      />
      {grid && (
        <div
          aria-hidden
          className="absolute inset-0 bg-[linear-gradient(#ffffff0d_1px,transparent_1px),linear-gradient(90deg,#ffffff0d_1px,transparent_1px)] bg-[size:28px_28px]"
        />
      )}
      <div className="relative h-full">{children}</div>
    </div>
  );
}