"use client"; import React, { useCallback, useRef } from "react"; /** * Button that leans toward the cursor while it is nearby, and springs back. * * Pointer tracking is bound to the wrapper rather than the button so the pull * begins before the cursor actually reaches it — that anticipation is what * makes the effect read as magnetism rather than a hover state. * * Transforms are written straight to style in a rAF, so nothing re-renders * while the pointer moves. */ export function MagneticButton({ label = "Start a project", strength = 0.35, // The catchment area is real layout space, so keep the default modest — // at 90 the component reserved a 250px box and dominated any tile it sat // in. Raise it on a full-width hero where there is room to spare. radius = 52, onClick, }: { label?: string; /** 0–1. How far the button travels relative to cursor distance. */ strength?: number; /** Pixels of padding around the button that still attract. */ radius?: number; onClick?: () => void; }) { const wrap = useRef(null); const btn = useRef(null); const raf = useRef(0); const target = useRef({ x: 0, y: 0 }); const current = useRef({ x: 0, y: 0 }); const loop = useCallback(() => { raf.current = 0; const b = btn.current; if (!b) return; // Critically-damped-ish easing; fast enough to feel attached to the // cursor, slow enough to keep weight. current.current.x += (target.current.x - current.current.x) * 0.18; current.current.y += (target.current.y - current.current.y) * 0.18; b.style.transform = `translate3d(${current.current.x.toFixed(2)}px, ${current.current.y.toFixed(2)}px, 0)`; const settled = Math.abs(target.current.x - current.current.x) < 0.1 && Math.abs(target.current.y - current.current.y) < 0.1; if (!settled) raf.current = requestAnimationFrame(loop); }, []); const kick = useCallback(() => { if (!raf.current) raf.current = requestAnimationFrame(loop); }, [loop]); const move = (e: React.PointerEvent) => { const b = btn.current; if (!b) return; const r = b.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; const dx = e.clientX - cx; const dy = e.clientY - cy; const dist = Math.hypot(dx, dy); const reach = Math.max(r.width, r.height) / 2 + radius; if (dist < reach) { target.current = { x: dx * strength, y: dy * strength }; } else { target.current = { x: 0, y: 0 }; } kick(); }; const reset = () => { target.current = { x: 0, y: 0 }; kick(); }; return (

); } export default MagneticButton;

Magnetic Button

Preview

Source