"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface MorphingBlobProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Size of the blob
   * @default 400
   */
  size?: number;
  /**
   * Animation duration in seconds
   * @default 8
   */
  duration?: number;
  /**
   * Blur amount for the glow effect
   * @default 60
   */
  blur?: number;
  /**
   * Opacity of the blob
   * @default 0.6
   */
  opacity?: number;
  /**
   * Color variant using semantic colors
   * @default "primary"
   */
  variant?: "primary" | "secondary" | "accent" | "custom";
  /**
   * Custom gradient when variant is custom
   */
  customGradient?: string;
  /**
   * Whether the blob should float/move
   * @default true
   */
  animate?: boolean;
}

const blobPaths = [
  "M44.5,-58.9C56.7,-51.3,65.1,-36.6,70.3,-20.5C75.4,-4.4,77.3,13.1,71.4,27.6C65.5,42.1,51.8,53.5,36.7,61.1C21.5,68.8,4.9,72.6,-11.2,71.3C-27.3,70,-42.9,63.6,-54.3,52.7C-65.7,41.8,-72.9,26.4,-74.7,10.3C-76.5,-5.9,-72.8,-22.7,-64.2,-36.6C-55.6,-50.5,-42,-61.4,-27.5,-67.8C-13,-74.2,2.5,-76.1,17.4,-72.2C32.3,-68.3,46.6,-58.6,44.5,-58.9Z",
  "M39.9,-52.3C52.5,-43.9,64.1,-33.3,69.3,-19.8C74.5,-6.3,73.3,10.2,67.1,24C60.9,37.8,49.6,48.9,36.5,56.6C23.4,64.3,8.4,68.6,-6.3,68.1C-21,67.6,-35.4,62.3,-47.1,53.1C-58.7,43.9,-67.6,30.8,-71.5,15.8C-75.4,0.7,-74.3,-16.4,-67.3,-30.2C-60.3,-44,-47.4,-54.5,-34,-62.1C-20.6,-69.7,-6.7,-74.4,5.3,-71.8C17.4,-69.3,27.3,-60.7,39.9,-52.3Z",
  "M47.7,-62.5C60.4,-53.6,68.4,-37.9,72.4,-21.5C76.3,-5.1,76.2,12,70.4,26.6C64.7,41.2,53.3,53.3,39.6,60.8C25.9,68.2,9.8,71,-5.8,69.4C-21.4,67.8,-36.5,61.7,-48.9,51.8C-61.2,41.9,-70.8,28.2,-74.4,12.8C-78,-2.6,-75.6,-19.7,-67.8,-33.6C-60,-47.5,-46.9,-58.2,-33,-65.1C-19.1,-72,-4.4,-75.1,8.9,-72.3C22.2,-69.5,35,-71.4,47.7,-62.5Z",
  "M42.1,-55.5C54.1,-47.2,63.1,-34.3,68.2,-19.6C73.3,-4.9,74.5,11.6,69.1,25.8C63.6,39.9,51.4,51.6,37.4,59.4C23.5,67.2,7.7,71,-8.2,70.2C-24.1,69.5,-40.2,64.2,-52.4,54.3C-64.6,44.4,-72.8,29.9,-75.3,14.4C-77.7,-1.2,-74.3,-17.8,-66.5,-32C-58.6,-46.2,-46.2,-58,-33,-65.4C-19.8,-72.7,-5.8,-75.6,6.4,-73.1C18.6,-70.5,30.1,-63.7,42.1,-55.5Z",
];

// Variant color configurations with fallback colors
const variantColors = {
  primary: {
    start: "#6366f1", // indigo-500
    mid: "#8b5cf6",   // violet-500
    end: "#a855f7",   // purple-500
  },
  secondary: {
    start: "#06b6d4", // cyan-500
    mid: "#3b82f6",   // blue-500
    end: "#8b5cf6",   // violet-500
  },
  accent: {
    start: "#f59e0b", // amber-500
    mid: "#ef4444",   // red-500
    end: "#ec4899",   // pink-500
  },
  custom: {
    start: "#6366f1",
    mid: "#8b5cf6",
    end: "#a855f7",
  },
};

function MorphingBlob({
  size = 400,
  duration = 8,
  blur = 60,
  opacity = 0.6,
  variant = "primary",
  customGradient,
  animate = true,
  className,
  style,
  ...props
}: MorphingBlobProps) {
  const colors = variantColors[variant];
  const gradientId = React.useId();

  return (
    <div
      className={cn("pointer-events-none absolute", className)}
      style={{
        width: size,
        height: size,
        filter: `blur(${blur}px)`,
        opacity,
        ...style,
      }}
      aria-hidden="true"
      {...props}
    >
      <motion.svg
        viewBox="0 0 200 200"
        className="h-full w-full"
        animate={
          animate
            ? {
                scale: [1, 1.05, 0.95, 1],
                rotate: [0, 180, 360],
                x: [0, 20, -20, 0],
                y: [0, -15, 15, 0],
              }
            : undefined
        }
        transition={
          animate
            ? {
                duration: duration * 2,
                repeat: Infinity,
                ease: "easeInOut",
              }
            : undefined
        }
      >
        <defs>
          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor={colors.start} />
            <stop offset="50%" stopColor={colors.mid} />
            <stop offset="100%" stopColor={colors.end} />
          </linearGradient>
        </defs>
        <motion.path
          fill={`url(#${gradientId})`}
          transform="translate(100 100)"
          animate={
            animate
              ? {
                  d: blobPaths,
                }
              : undefined
          }
          transition={
            animate
              ? {
                  duration,
                  repeat: Infinity,
                  ease: "easeInOut",
                }
              : undefined
          }
          d={blobPaths[0]}
        />
      </motion.svg>
    </div>
  );
}

interface MorphingBlobBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Number of blobs to render
   * @default 3
   */
  blobCount?: number;
  /**
   * Whether blobs should animate
   * @default true
   */
  animate?: boolean;
}

function MorphingBlobBackground({
  blobCount = 3,
  animate = true,
  children,
  className,
  ...props
}: MorphingBlobBackgroundProps) {
  const blobConfigs = React.useMemo(
    () => [
      { variant: "primary" as const, size: 500, top: "-10%", left: "-10%", duration: 8 },
      { variant: "secondary" as const, size: 450, top: "50%", right: "-15%", duration: 10 },
      { variant: "accent" as const, size: 400, bottom: "-5%", left: "30%", duration: 12 },
    ],
    []
  );

  return (
    <div className={cn("relative h-full w-full overflow-hidden", className)} {...props}>
      {blobConfigs.slice(0, blobCount).map((config, index) => (
        <MorphingBlob
          key={index}
          variant={config.variant}
          size={config.size}
          duration={config.duration}
          animate={animate}
          style={{
            top: config.top,
            left: config.left,
            right: config.right,
            bottom: config.bottom,
          }}
        />
      ))}
      <div className="relative z-10 h-full">{children}</div>
    </div>
  );
}

export { MorphingBlob, MorphingBlobBackground };
Morphing Blob

Morphing Background

Dependencies

Files

Installation
