"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" }, }; export default function LiquidInkButton({ btn, index = 0 }) { const [blobs, setBlobs] = useState([]); const [filled, setFilled] = useState(false); const [mounted, setMounted] = useState(false); const btnRef = useRef(null); const counterRef = useRef(0); useEffect(() => { const t = setTimeout(() => setMounted(true), index * 100); return () => clearTimeout(t); }, [index]); const handleClick = (e) => { if (filled) return; const rect = btnRef.current.getBoundingClientRect(); const id = ++counterRef.current; setFilled(true); setBlobs((p) => [ ...p, { id, x: e.clientX - rect.left, y: e.clientY - rect.top, }, ]); setTimeout(() => setFilled(false), 1800); }; const removeBlob = (id) => { setBlobs((p) => p.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) => ( removeBlob(blob.id)} style={{ position: "absolute", left: blob.x, top: blob.y, width: 10, height: 10, marginLeft: -5, marginTop: -5, borderRadius: "50%", background: btn.inkColor, animation: "inkSpread 2s ease forwards", }} /> ))}

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

))} {/* Text */}

{btn.label} {btn.icon}

{filled ? "● INK FLOWING" : "○ CLICK TO INK"}

); }

Components

Liquid Ink Button

Installation

Tailwind Setup