Dots Background

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

export interface DotsBackgroundProps {
  children?: ReactNode;
  /** Distance between dots in px. */
  gap?: number;
  /** Dot radius in px. */
  size?: number;
  /** Seconds for one pan cycle (0 = static). */
  speed?: number;
  /** Fade dots toward the edges (halftone look). */
  halftone?: boolean;
  className?: string;
}

/** Halftone dot field in the DA ink color, slowly panning diagonally. Pure CSS. */
export function DotsBackground({ children, gap = 22, size = 2, speed = 20, halftone = true, className }: DotsBackgroundProps) {
  return (
    <div className={cn("relative isolate overflow-hidden bg-da-bg text-da-fg", className)}>
      <div
        aria-hidden
        className={cn(
          "brutalist-dots absolute -inset-[50px] -z-10 opacity-40",
          halftone && "[mask-image:radial-gradient(ellipse_at_center,black_20%,transparent_75%)]",
        )}
        style={
          {
            backgroundImage: `radial-gradient(var(--da-border) ${size}px, transparent ${size + 0.5}px)`,
            backgroundSize: `${gap}px ${gap}px`,
            "--dots-gap": `${gap}px`,
            animationDuration: speed ? `${speed}s` : undefined,
            animationName: speed ? undefined : "none",
          } as CSSProperties
        }
      />
      {children}
      <style href="brutalist-dots" precedence="default">{`
        @keyframes brutalist-dots { to { translate: var(--dots-gap) var(--dots-gap) } }
        .brutalist-dots { animation: brutalist-dots 20s linear infinite }
        @media (prefers-reduced-motion: reduce) { .brutalist-dots { animation: none } }
      `}</style>
    </div>
  );
}

export default DotsBackground;