Grid Background

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface GridBackgroundProps {
  children?: ReactNode;
  /** Grid cell size in px. */
  cell?: number;
  /** Seconds for the grid to drift by one cell (0 disables the drift). */
  speed?: number;
  /** Solid squares that blink on the grid. */
  blocks?: number;
  /** Adds an SVG grain layer. */
  noise?: boolean;
  className?: string;
}

// Deterministic pseudo-random positions so server and client render the same thing.
function blockPositions(count: number): { x: number; y: number; tone: number; delay: number }[] {
  return Array.from({ length: count }, (_, i) => ({
    x: (i * 37 + 11) % 97,
    y: (i * 53 + 7) % 89,
    tone: i % 3,
    delay: (i * 0.7) % 4,
  }));
}

const TONES = ["bg-da-primary", "bg-da-accent", "bg-da-secondary"];

const NOISE =
  "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>\")";

export function GridBackground({ children, cell = 48, speed = 6, blocks = 7, noise = true, className }: GridBackgroundProps) {
  const reduce = useReducedMotion();
  const animate = !reduce && speed > 0;

  return (
    <div className={cn("relative isolate overflow-hidden bg-da-bg text-da-fg", className)}>
      <motion.div
        aria-hidden
        className="absolute -inset-px -z-10 opacity-25 [background-image:linear-gradient(var(--da-border)_2px,transparent_2px),linear-gradient(90deg,var(--da-border)_2px,transparent_2px)]"
        style={{ backgroundSize: `${cell}px ${cell}px` }}
        animate={animate ? { backgroundPosition: ["0px 0px", `${cell}px ${cell}px`] } : undefined}
        transition={animate ? { duration: speed, ease: "linear", repeat: Infinity } : undefined}
      />
      <div aria-hidden className="absolute inset-0 -z-10">
        {blockPositions(blocks).map((b, i) => (
          <motion.span
            key={i}
            className={cn("da-stroke absolute", TONES[b.tone])}
            style={{ left: `${b.x}%`, top: `${b.y}%`, width: cell, height: cell }}
            initial={{ opacity: 1 }}
            animate={reduce ? undefined : { opacity: [1, 1, 0, 0, 1] }}
            transition={reduce ? undefined : { duration: 4, delay: b.delay, repeat: Infinity, ease: "linear", times: [0, 0.5, 0.5, 0.75, 0.75] }}
          />
        ))}
      </div>
      {noise && <div aria-hidden className="pointer-events-none absolute inset-0 -z-10 opacity-20 mix-blend-multiply" style={{ backgroundImage: NOISE }} />}
      {children}
    </div>
  );
}

export default GridBackground;