"use client"; import { useEffect, useRef, useState } from "react"; const sizeMap = { lg: { width: 220, height: 62, fontSize: 14, iconSize: 18, padding: "0 28px", letterSpacing: "0.18em" }, md: { width: 180, height: 54, fontSize: 12, iconSize: 16, padding: "0 22px", letterSpacing: "0.2em" }, sm: { width: 150, height: 46, fontSize: 11, iconSize: 14, padding: "0 18px", letterSpacing: "0.22em" }, }; function InkBlob({ x, y, color, id, onDone }) { const [phase, setPhase] = useState("expanding"); useEffect(() => { const t1 = setTimeout(() => setPhase("holding"), 620); const t2 = setTimeout(() => setPhase("retracting"), 1800); const t3 = setTimeout(() => onDone(id), 2300); return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); }; }, [id, onDone]); const opacity = phase === "retracting" ? 0 : 1; return (

); } export default function LiquidInkButton({ btn, index }) { const [blobs, setBlobs] = useState([]); const [filled, setFilled] = useState(false); const [mounted, setMounted] = useState(false); const btnRef = useRef(null); const counterRef = useRef(0); useEffect(() => { setTimeout(() => setMounted(true), index * 100); }, [index]); const handleClick = (e) => { const rect = btnRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const id = ++counterRef.current; setFilled(true); setBlobs((prev) => [...prev, { id, x, y }]); setTimeout(() => setFilled(false), 1850); }; const removeBlob = (id) => { setBlobs((prev) => prev.filter((b) => b.id !== id)); }; const sz = sizeMap[btn.size]; const radius = btn.shape === "pill" ? 100 : 10; return (

{/* Gooey filter */} {/* Blob layer */}

{blobs.map((blob) => ( ))}

{/* Ink drip */} {filled && [0.2, 0.45, 0.7, 0.88].map((pct, i) => (

))} {/* Text */}

{btn.label} {btn.icon}

{/* Gloss */}

{/* State label */} {filled ? "● INK FLOWING" : "○ CLICK TO INK"}

); }

Components

Liquid Ink Button

Installation

Tailwind Setup