Blobs Background

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

export interface BlobsBackgroundProps {
  children?: ReactNode;
  /** Seconds per morph cycle. */
  duration?: number;
  /** Put a frosted pane over the blobs (true glassmorphism). */
  frost?: boolean;
  className?: string;
}

/** Three large gradient blobs that morph their border-radius and drift slowly, optionally seen through a frosted pane. Pure CSS. */
export function BlobsBackground({ children, duration = 18, frost = true, className }: BlobsBackgroundProps) {
  const blobs = [
    "top-[-10%] left-[-5%] size-[55vmax] max-h-[620px] max-w-[620px] bg-gradient-to-br from-da-primary to-da-accent",
    "right-[-10%] bottom-[-20%] size-[50vmax] max-h-[560px] max-w-[560px] bg-gradient-to-br from-da-danger to-da-primary [animation-delay:-6s]",
    "top-[30%] left-[35%] size-[35vmax] max-h-[400px] max-w-[400px] bg-gradient-to-br from-da-accent to-da-success [animation-delay:-12s]",
  ];
  return (
    <div className={cn("relative isolate overflow-hidden text-da-fg", className)}>
      <div aria-hidden className="absolute inset-0 -z-10">
        {blobs.map((b, i) => (
          <span key={i} className={cn("glass-blob absolute opacity-60", b)} style={{ animationDuration: `${duration}s` }} />
        ))}
        {frost && <span className="absolute inset-0 bg-da-surface-2 backdrop-blur-[60px] backdrop-saturate-150" />}
      </div>
      {children}
      <style href="glass-blob" precedence="default">{`
        @keyframes glass-blob {
          0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; translate: 0 0; rotate: 0deg }
          33% { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; translate: 6% 4%; rotate: 40deg }
          66% { border-radius: 30% 70% 70% 30% / 53% 30% 70% 47%; translate: -4% 6%; rotate: -30deg }
        }
        .glass-blob { animation: glass-blob 18s ease-in-out infinite; filter: blur(8px) }
        @media (prefers-reduced-motion: reduce) { .glass-blob { animation: none } }
      `}</style>
    </div>
  );
}

export default BlobsBackground;