NebulaGrid

"use client";

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

type NebulaGridProps = {
  children?: ReactNode;
  className?: string;
  /** Colour of the grid lines and the horizon line. */
  color?: string;
  /** Colour of the glow on the horizon. */
  glow?: string;
  background?: string;
  /** Grid cell size in pixels. */
  cell?: number;
  /** 1 is the default pace; 2 is twice as fast. */
  speed?: number;
};

/* NebulaGrid: a glowing grid floor that rolls toward you, with a soft glow on the horizon. */
export function NebulaGrid({
  children,
  className = "",
  color = "#a78bfa",
  glow = "#ff5fa2",
  background = "#07060f",
  cell = 44,
  speed = 1,
}: NebulaGridProps) {
  const reduce = useReducedMotion();
  const lines = `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`;
  const fade = "linear-gradient(to bottom, transparent, black 45%)";

  return (
    <div className={`relative overflow-hidden ${className}`} style={{ background }}>
      <div
        aria-hidden
        className="absolute inset-x-[15%] top-[30%] h-[35%] rounded-full opacity-50 blur-[60px]"
        style={{ background: glow }}
      />
      <div aria-hidden className="absolute inset-x-0 top-1/2 h-px opacity-70" style={{ background: color }} />
      <div
        aria-hidden
        className="absolute inset-x-0 bottom-0 top-1/2 overflow-hidden"
        style={{ perspective: 300, maskImage: fade, WebkitMaskImage: fade }}
      >
        <div
          className="absolute -left-1/2 bottom-0 h-[260%] w-[200%] overflow-hidden opacity-50"
          style={{ transform: "rotateX(62deg)", transformOrigin: "bottom" }}
        >
          <motion.div
            className="absolute inset-x-0 bottom-0"
            style={{ top: -cell, backgroundImage: lines, backgroundSize: `${cell}px ${cell}px` }}
            animate={reduce ? undefined : { y: [0, cell] }}
            transition={{ duration: 1.4 / speed, repeat: Infinity, ease: "linear" }}
          />
        </div>
      </div>
      <div className="relative h-full">{children}</div>
    </div>
  );
}