liquid-blob

1"use client"
2 
3import { motion, useMotionValue, useSpring } from "framer-motion"
4import { useEffect, useRef } from "react"
5import { cn } from "@/lib/utils"
6 
7interface LiquidBlobProps {
8  className?: string
9  color?: string
10  secondaryColor?: string
11  size?: number
12  blur?: number
13  speed?: number
14  opacity?: number
15  interactive?: boolean
16}
17 
18export function LiquidBlob({
19  className,
20  color = "#8b5cf6",
21  secondaryColor = "#ec4899",
22  size = 300,
23  blur = 60,
24  speed = 8,
25  opacity = 0.7,
26  interactive = true,
27}: LiquidBlobProps) {
28  const containerRef = useRef<HTMLDivElement>(null)
29  const mouseX = useMotionValue(0)
30  const mouseY = useMotionValue(0)
31  
32  const springConfig = { damping: 25, stiffness: 150 }
33  const smoothX = useSpring(mouseX, springConfig)
34  const smoothY = useSpring(mouseY, springConfig)
35 
36  useEffect(() => {
37    if (!interactive) return
38    
39    const container = containerRef.current
40    if (!container) return
41 
42    const handleMouseMove = (e: MouseEvent) => {
43      const rect = container.getBoundingClientRect()
44      const x = e.clientX - rect.left - rect.width / 2
45      const y = e.clientY - rect.top - rect.height / 2
46      mouseX.set(x * 0.15)
47      mouseY.set(y * 0.15)
48    }
49 
50    const handleMouseLeave = () => {
51      mouseX.set(0)
52      mouseY.set(0)
53    }
54 
55    container.addEventListener("mousemove", handleMouseMove)
56    container.addEventListener("mouseleave", handleMouseLeave)
57 
58    return () => {
59      container.removeEventListener("mousemove", handleMouseMove)
60      container.removeEventListener("mouseleave", handleMouseLeave)
61    }
62  }, [interactive, mouseX, mouseY])
63 
64  return (
65    <div 
66      ref={containerRef}
67      className={cn("pointer-events-auto absolute inset-0 overflow-hidden", className)}
68    >
69      <motion.div
70        className="absolute rounded-full"
71        style={{
72          width: size,
73          height: size,
74          background: `radial-gradient(circle, ${color} 0%, ${secondaryColor} 100%)`,
75          filter: `blur(${blur}px)`,
76          opacity,
77          left: "20%",
78          top: "20%",
79          x: smoothX,
80          y: smoothY,
81        }}
82        animate={{
83          scale: [1, 1.2, 0.9, 1.1, 1],
84          borderRadius: [
85            "60% 40% 30% 70% / 60% 30% 70% 40%",
86            "30% 60% 70% 40% / 50% 60% 30% 60%",
87            "60% 40% 30% 70% / 60% 30% 70% 40%",
88            "40% 60% 60% 40% / 70% 30% 50% 60%",
89            "60% 40% 30% 70% / 60% 30% 70% 40%",
90          ],
91        }}
92// … truncated