Mesh Background

"use client";

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

export interface MeshBackgroundProps {
  children?: ReactNode;
  /** Seconds for one full drift cycle of the blobs. */
  duration?: number;
  /** Blob fill colors (CSS colors or var()). Defaults to the DA primary/accent + two decorative hues. */
  colors?: string[];
  /** Merge blobs together with an SVG "goo" filter for a liquid look. */
  liquid?: boolean;
  className?: string;
}

const PATHS = [
  { cx: 22, cy: 30, r: 26, x: [0, 12, -6, 0], y: [0, 8, 14, 0] },
  { cx: 74, cy: 24, r: 22, x: [0, -14, 6, 0], y: [0, 12, -4, 0] },
  { cx: 58, cy: 74, r: 28, x: [0, 8, -12, 0], y: [0, -10, 6, 0] },
  { cx: 18, cy: 82, r: 18, x: [0, 10, 4, 0], y: [0, -8, -14, 0] },
];

/**
 * Living mesh gradient: four large blobs drifting slowly in an SVG, optionally
 * merged by a goo filter, then heavily blurred. Sits behind any content.
 */
export function MeshBackground({
  children,
  duration = 24,
  colors = ["var(--da-primary)", "var(--da-accent)", "#f472b6", "#818cf8"],
  liquid = true,
  className,
}: MeshBackgroundProps) {
  const reduce = useReducedMotion();
  const filterId = useId().replace(/:/g, "");

  return (
    <div className={cn("relative isolate overflow-hidden", className)}>
      <svg aria-hidden className="absolute inset-0 -z-10 size-full opacity-70 blur-[60px] saturate-150 [mask-image:linear-gradient(to_bottom,black_70%,transparent)]" viewBox="0 0 100 100" preserveAspectRatio="none">
        {liquid && (
          <defs>
            <filter id={filterId}>
              <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9" />
            </filter>
          </defs>
        )}
        <g filter={liquid ? `url(#${filterId})` : undefined}>
          {PATHS.map((p, i) => (
            <motion.circle
              key={i}
              cx={p.cx}
              cy={p.cy}
              r={p.r}
              style={{ fill: colors[i % colors.length] }}
              animate={reduce ? undefined : { x: p.x, y: p.y }}
              transition={reduce ? undefined : { duration, repeat: Infinity, ease: "easeInOut", delay: i * 1.2 }}
            />
          ))}
        </g>
      </svg>
      {/* Subtle grain keeps large gradients from banding */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 opacity-[0.07] mix-blend-overlay"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>\")",
        }}
      />
      {children}
    </div>
  );
}

export default MeshBackground;