{
  "name": "liquid-blob",
  "type": "registry:ui",
  "dependencies": ["framer-motion"],
  "registryDependencies": [],
  "description": "Animated liquid morphing blob shapes with mouse interaction that create a beautiful organic background effect.",
  "files": [
    {
      "path": "components/ui/liquid-blob.tsx",
      "content": "\"use client\"\n\nimport { motion, useMotionValue, useSpring } from \"framer-motion\"\nimport { useEffect, useRef } from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface LiquidBlobProps {\n  className?: string\n  color?: string\n  secondaryColor?: string\n  size?: number\n  blur?: number\n  speed?: number\n  opacity?: number\n  interactive?: boolean\n}\n\nexport function LiquidBlob({\n  className,\n  color = \"#8b5cf6\",\n  secondaryColor = \"#ec4899\",\n  size = 300,\n  blur = 60,\n  speed = 8,\n  opacity = 0.7,\n  interactive = true,\n}: LiquidBlobProps) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const mouseX = useMotionValue(0)\n  const mouseY = useMotionValue(0)\n  \n  const springConfig = { damping: 25, stiffness: 150 }\n  const smoothX = useSpring(mouseX, springConfig)\n  const smoothY = useSpring(mouseY, springConfig)\n\n  useEffect(() => {\n    if (!interactive) return\n    \n    const container = containerRef.current\n    if (!container) return\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const rect = container.getBoundingClientRect()\n      const x = e.clientX - rect.left - rect.width / 2\n      const y = e.clientY - rect.top - rect.height / 2\n      mouseX.set(x * 0.15)\n      mouseY.set(y * 0.15)\n    }\n\n    const handleMouseLeave = () => {\n      mouseX.set(0)\n      mouseY.set(0)\n    }\n\n    container.addEventListener(\"mousemove\", handleMouseMove)\n    container.addEventListener(\"mouseleave\", handleMouseLeave)\n\n    return () => {\n      container.removeEventListener(\"mousemove\", handleMouseMove)\n      container.removeEventListener(\"mouseleave\", handleMouseLeave)\n    }\n  }, [interactive, mouseX, mouseY])\n\n  return (\n    <div \n      ref={containerRef}\n      className={cn(\"pointer-events-auto absolute inset-0 overflow-hidden\", className)}\n    >\n      <motion.div\n        className=\"absolute rounded-full\"\n        style={{\n          width: size,\n          height: size,\n          background: `radial-gradient(circle, ${color} 0%, ${secondaryColor} 100%)`,\n          filter: `blur(${blur}px)`,\n          opacity,\n          left: \"20%\",\n          top: \"20%\",\n          x: smoothX,\n          y: smoothY,\n        }}\n        animate={{\n          scale: [1, 1.2, 0.9, 1.1, 1],\n          borderRadius: [\n            \"60% 40% 30% 70% / 60% 30% 70% 40%\",\n            \"30% 60% 70% 40% / 50% 60% 30% 60%\",\n            \"60% 40% 30% 70% / 60% 30% 70% 40%\",\n            \"40% 60% 60% 40% / 70% 30% 50% 60%\",\n            \"60% 40% 30% 70% / 60% 30% 70% 40%\",\n          ],\n        }}\n        transition={{\n          duration: speed,\n          repeat: Infinity,\n          ease: \"easeInOut\",\n        }}\n      />\n      <motion.div\n        className=\"absolute rounded-full\"\n        style={{\n          width: size * 0.8,\n          height: size * 0.8,\n          background: `radial-gradient(circle, ${secondaryColor} 0%, ${color} 100%)`,\n          filter: `blur(${blur}px)`,\n          opacity: opacity * 0.8,\n          right: \"20%\",\n          bottom: \"20%\",\n          x: useSpring(mouseX, { damping: 30, stiffness: 120 }),\n          y: useSpring(mouseY, { damping: 30, stiffness: 120 }),\n        }}\n        animate={{\n          scale: [1, 0.9, 1.2, 1, 1],\n          borderRadius: [\n            \"40% 60% 60% 40% / 70% 30% 50% 60%\",\n            \"60% 40% 30% 70% / 60% 30% 70% 40%\",\n            \"30% 60% 70% 40% / 50% 60% 30% 60%\",\n            \"60% 40% 30% 70% / 60% 30% 70% 40%\",\n            \"40% 60% 60% 40% / 70% 30% 50% 60%\",\n          ],\n        }}\n        transition={{\n          duration: speed * 1.2,\n          repeat: Infinity,\n          ease: \"easeInOut\",\n        }}\n      />\n      <motion.div\n        className=\"absolute rounded-full\"\n        style={{\n          width: size * 0.6,\n          height: size * 0.6,\n          background: `radial-gradient(circle, ${color} 30%, transparent 100%)`,\n          filter: `blur(${blur * 0.8}px)`,\n          opacity: opacity * 0.6,\n          left: \"50%\",\n          top: \"50%\",\n          marginLeft: -size * 0.3,\n          marginTop: -size * 0.3,\n          x: useSpring(mouseX, { damping: 20, stiffness: 100 }),\n          y: useSpring(mouseY, { damping: 20, stiffness: 100 }),\n        }}\n        animate={{\n          scale: [1, 1.3, 0.8, 1.1, 1],\n          borderRadius: [\n            \"60% 40% 30% 70% / 60% 30% 70% 40%\",\n            \"40% 60% 60% 40% / 70% 30% 50% 60%\",\n            \"60% 40% 30% 70% / 60% 30% 70% 40%\",\n            \"30% 60% 70% 40% / 50% 60% 30% 60%\",\n            \"60% 40% 30% 70% / 60% 30% 70% 40%\",\n          ],\n        }}\n        transition={{\n          duration: speed * 0.9,\n          repeat: Infinity,\n          ease: \"easeInOut\",\n        }}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}