"use client"; import { useCallback, useEffect, useRef, useState } from "react"; export default function MagneticButton({ label = "CLICK", sublabel = "", icon = "◎", color = "#00f5ff", glow = "#00f5ff", textColor = "#000", pill = false, index = 0, onClick, }) { const btnRef = useRef(null); const [pos, setPos] = useState({ x: 0, y: 0 }); const [textPos, setTextPos] = useState({ x: 0, y: 0 }); const [isNear, setIsNear] = useState(false); const [isPressed, setIsPressed] = useState(false); const [ripples, setRipples] = useState([]); const [mounted, setMounted] = useState(false); const animRef = useRef(null); const currentPos = useRef({ x: 0, y: 0 }); const currentTxtPos = useRef({ x: 0, y: 0 }); const targetPos = useRef({ x: 0, y: 0 }); const targetTxtPos = useRef({ x: 0, y: 0 }); useEffect(() => { setTimeout(() => setMounted(true), index * 120); }, [index]); // lerp animation loop const animate = useCallback(() => { const lerp = (a, b, t) => a + (b - a) * t; currentPos.current.x = lerp(currentPos.current.x, targetPos.current.x, 0.12); currentPos.current.y = lerp(currentPos.current.y, targetPos.current.y, 0.12); currentTxtPos.current.x = lerp(currentTxtPos.current.x, targetTxtPos.current.x, 0.09); currentTxtPos.current.y = lerp(currentTxtPos.current.y, targetTxtPos.current.y, 0.09); setPos({ ...currentPos.current }); setTextPos({ ...currentTxtPos.current }); animRef.current = requestAnimationFrame(animate); }, []); useEffect(() => { animRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(animRef.current); }, [animate]); const handleMouseMove = useCallback((e) => { const rect = btnRef.current.getBoundingClientRect(); const distX = e.clientX - (rect.left + rect.width / 2); const distY = e.clientY - (rect.top + rect.height / 2); const dist = Math.sqrt(distX * distX + distY * distY); const radius = 120; if (dist < radius) { const strength = 1 - dist / radius; setIsNear(true); targetPos.current = { x: distX * strength * 0.45, y: distY * strength * 0.45 }; targetTxtPos.current = { x: distX * strength * 0.28, y: distY * strength * 0.28 }; } else { setIsNear(false); targetPos.current = { x: 0, y: 0 }; targetTxtPos.current = { x: 0, y: 0 }; } }, []); const handleMouseLeave = useCallback(() => { setIsNear(false); targetPos.current = { x: 0, y: 0 }; targetTxtPos.current = { x: 0, y: 0 }; }, []); const handleClick = (e) => { setIsPressed(true); setTimeout(() => setIsPressed(false), 150); const rect = btnRef.current.getBoundingClientRect(); const id = Date.now(); setRipples(p => [...p, { id, x: e.clientX - rect.left, y: e.clientY - rect.top }]); setTimeout(() => setRipples(p => p.filter(r => r.id !== id)), 700); onClick?.(); }; const br = pill ? 50 : 12; return (

{/* magnetic field rings */} {[{ size: 240, margin: -120, op: 0.12, mult: 0.2 }, { size: 180, margin: -90, op: 0.08, mult: 0.3 }].map((ring, i) => (

))} {/* button wrapper — handles magnetic translate + scale */}

{/* glow halo */}

{/* button body */}

{/* ripples */} {ripples.map(r => ( ))} {/* top shine */}

{/* label + icon */}

{icon} {label}

{/* sublabel */} {sublabel && ( {sublabel} )}

); }

Components

Magnetic Button

Installation

Tailwind Setup