"use client"

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

interface LiquidMorphingButtonProps
  extends HTMLMotionProps<"button"> {
  children: React.ReactNode
  morphColor?: string
  glowColor?: string
  intensity?: number
}

export function LiquidMorphingButton({
  children,
  className,
  morphColor = "#3b82f6", // blue-500
  glowColor = "rgba(59, 130, 246, 0.5)",
  intensity = 0.4,
  ...props
}: LiquidMorphingButtonProps) {
  const [isHovered, setIsHovered] = React.useState(false)

  // Random blob shapes for the liquid background
  const blobs = React.useMemo(() => {
    return Array.from({ length: 4 }).map(() => ({
      x: Math.random() * 100,
      y: Math.random() * 100,
      scale: 0.8 + Math.random() * 0.4,
      duration: 3 + Math.random() * 2,
    }))
  }, [])

  return (
    <div className="relative inline-block group">
      {/* SVG Filter for Gooey Effect */}
      <svg className="absolute w-0 h-0">
        <defs>
          <filter id="liquid-filter">
            <feGaussianBlur
              in="SourceGraphic"
              stdDeviation="10"
              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 18 -7"
              result="goo"
            />
            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
          </filter>
        </defs>
      </svg>

      <motion.button
        className={cn(
          "relative z-10 px-8 py-4 text-lg font-medium text-white bg-transparent border-none outline-none cursor-pointer overflow-hidden rounded-full",
          className
        )}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        {...props}
      >
        {/* Liquid Background */}
        <div
          className="absolute inset-0 w-full h-full"
          style={{ filter: "url(#liquid-filter)" }}
        >
          <div
            className="absolute inset-0 bg-primary opacity-80"
            style={{ backgroundColor: morphColor }}
          />
          
          {/* Animated Blobs */}
          {blobs.map((blob, i) => (
            <motion.div
              key={i}
              className="absolute rounded-full"
              style={{
                backgroundColor: morphColor,
                width: "60%",
                height: "60%",
                left: "20%",
                top: "20%",
              }}
              animate={
                isHovered
                  ? {
                      x: [0, (Math.random() - 0.5) * 100, 0],
                      y: [0, (Math.random() - 0.5) * 100, 0],
                      scale: [1, 1.15 + intensity * 0.6, 1],
                    }
                  : {
                      x: 0,
                      y: 0,
                      scale: 1,
                    }
              }
              transition={{
                duration: blob.duration,
                repeat: Infinity,
                ease: "easeInOut",
              }}
            />
          ))}
          
          {/* Mouse follow blob */}
          <motion.div
            className="absolute w-20 h-20 rounded-full pointer-events-none"
            style={{
              backgroundColor: morphColor,
              left: "50%",
              top: "50%",
              x: "-50%",
              y: "-50%",
            }}
            animate={
              isHovered ? { scale: [1, 1.2 + intensity * 0.6, 1] } : { scale: 0 }
            }
            transition={{ duration: 0.5 }}
          />
        </div>

        {/* Content */}
        <span className="relative z-20 flex items-center justify-center gap-2">
          {children}
        </span>
      </motion.button>

      {/* Glow Effect */}
      <motion.div
        className="absolute inset-0 rounded-full -z-10 blur-xl"
        style={{ backgroundColor: glowColor }}
        animate={{
          opacity: isHovered ? 0.4 + intensity : 0,
          scale: isHovered ? 1 + intensity * 0.6 : 0.8,
        }}
        transition={{ duration: 0.3 }}
      />
    </div>
  )
}
Liquid Morphing Button

Dependencies

Files

Installation
