Blob Background

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

export interface BlobBackgroundProps {
  children?: ReactNode;
  /** Seconds per morph cycle (0 = static). */
  speed?: number;
  className?: string;
}

/** Three soft organic blobs (sage, clay, sand) slowly morphing their border-radius and drifting behind content — a living, breathing backdrop. Pure CSS. */
export function BlobBackground({ children, speed = 16, className }: BlobBackgroundProps) {
  const style = (delay: number) => ({
    animationDuration: speed ? `${speed}s` : undefined,
    animationDelay: `${delay}s`,
    animationName: speed ? undefined : "none",
  });
  return (
    <div className={cn("relative isolate overflow-hidden bg-da-bg text-da-fg", className)}>
      <div aria-hidden className="absolute inset-0 -z-10">
        <span className="os-blob absolute -top-[10%] -left-[8%] size-[55%] max-h-[480px] max-w-[480px] min-h-56 min-w-56 bg-da-accent" style={style(0)} />
        <span className="os-blob absolute top-[30%] -right-[10%] size-[50%] max-h-[440px] max-w-[440px] min-h-52 min-w-52 bg-da-secondary" style={style(-5)} />
        <span className="os-blob absolute -bottom-[20%] left-[30%] size-[40%] max-h-[360px] max-w-[360px] min-h-44 min-w-44 bg-da-muted" style={style(-10)} />
      </div>
      {children}
      <style href="os-blob" precedence="default">{`
        @keyframes os-blob {
          0%, 100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; translate: 0 0; rotate: 0deg }
          33% { border-radius: 45% 55% 40% 60% / 60% 45% 55% 40%; translate: 3% 4%; rotate: 8deg }
          66% { border-radius: 55% 45% 60% 40% / 40% 55% 45% 60%; translate: -3% 2%; rotate: -6deg }
        }
        .os-blob { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; animation: os-blob 16s ease-in-out infinite }
        @media (prefers-reduced-motion: reduce) { .os-blob { animation: none } }
      `}</style>
    </div>
  );
}

export default BlobBackground;