"use client"; import React, { useRef, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; interface LiquidButtonProps extends React.ButtonHTMLAttributes { children: React.ReactNode; variant?: "primary" | "outline"; color?: string; textColor?: string; } export default function LiquidButton({ children, variant = "primary", color = "#18B5FF", textColor, style, ...props }: LiquidButtonProps) { const [isHovered, setIsHovered] = useState(false); const [ripple, setRipple] = useState<{ x: number; y: number; key: number } | null>(null); const btnRef = useRef(null); let rippleKey = useRef(0); const isPrimary = variant === "primary"; const fgColor = textColor ?? (isPrimary ? "#fff" : color); const bgBase = isPrimary ? color : "transparent"; const borderColor = color; const handleMouseEnter = (e: React.MouseEvent) => { setIsHovered(true); if (!btnRef.current) return; const rect = btnRef.current.getBoundingClientRect(); setRipple({ x: e.clientX - rect.left, y: e.clientY - rect.top, key: ++rippleKey.current, }); }; const handleMouseLeave = () => { setIsHovered(false); setRipple(null); }; return ( ); }

Liquid Button