"use client"; /** * @author: @dorianbaffier * @description: Attract Button * @version: 2.0.0 * @date: 2026-10-16 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Magnet } from "lucide-react"; import { type ComponentProps, type FocusEvent, type PointerEvent as ReactPointerEvent, useEffect, useRef, } from "react"; import { cn } from "@/lib/utils"; interface AttractButtonProps extends ComponentProps<"button"> { /** Filing density. 1 places a filing roughly every 12px; 2 doubles it. */ density?: number; /** How far, in px, the field of filings extends past the button's edges. */ radius?: number; /** Classes for the wrapper that holds the button and its field. */ containerClassName?: string; } interface Filing { x: number; y: number; /** Rest direction in doubled-angle space (filings have no head or tail). */ restX: number; restY: number; /** Unit vector from the filing toward the button's center. */ inX: number; inY: number; /** 0 at the button's edge, 1 at the field's outer edge. */ t: number; fade: number; len: number; theta: number; omega: number; near: number; } interface Controls { setFocus: (on: boolean) => void; touchStart: (event: PointerEvent) => void; } const BASE_SPACING = 12; const FILING_LENGTH = 7; const LINE_WIDTH = 1.25; const CLEARANCE = 6; // Rotational spring: slightly under-damped so filings settle with a small, // physical overshoot rather than snapping. const STIFFNESS = 240; const DAMPING = 21; const PRESENCE_TAU = 0.07; const PULL_TAU = 0.09; const REST_ALPHA = 0.3; const HALF_PI = Math.PI / 2; const hash = (x: number, y: number, seed: number) => { const s = Math.sin(x * 127.1 + y * 311.7 + seed * 74.7) * 43_758.5453; return s - Math.floor(s); }; const smoothstep = (a: number, b: number, v: number) => { const k = Math.min(1, Math.max(0, (v - a) / (b - a))); return k * k * (3 - 2 * k); }; /** Shortest difference between two undirected angles, in (-π/2, π/2]. */ const lineDelta = (target: number, current: number) => { const d = (target - current + HALF_PI) % Math.PI; return (d < 0 ? d + Math.PI : d) - HALF_PI; }; export default function AttractButton({ className, containerClassName, children, density = 1, radius = 64, disabled, onPointerDown, onFocus, onBlur, ...props }: AttractButtonProps) { const wrapperRef = useRef(null); const canvasRef = useRef(null); const controlsRef = useRef(null); const disabledRef = useRef(Boolean(disabled)); disabledRef.current = Boolean(disabled); useEffect(() => { const wrapper = wrapperRef.current; const canvas = canvasRef.current; const ctx = canvas?.getContext("2d"); if (!(wrapper && canvas && ctx)) { return; } const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)"); const darkQuery = window.matchMedia("(prefers-color-scheme: dark)"); const spacing = BASE_SPACING / Math.max(0.25, density); let filings: Filing[] = []; let width = 0; let height = 0; let box = { left: 0, top: 0, right: 0, bottom: 0, cx: 0, cy: 0 }; let ink = "currentColor"; let raf = 0; let last = 0; let visible = true; let reduced = motionQuery.matches; const pointer = { x: 0, y: 0 }; let presence = 0; let presenceTarget = 0; let pull = 0; let pullTarget = 0; let focused = false; let touchId: number | null = null; const readInk = () => { ink = getComputedStyle(canvas).color; }; const layout = () => { const bw = wrapper.offsetWidth; const bh = wrapper.offsetHeight; width = bw + radius * 2; height = bh + radius * 2; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.round(width * dpr); canvas.height = Math.round(height * dpr); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); box = { left: radius, top: radius, right: radius + bw, bottom: radius + bh, cx: radius + bw / 2, cy: radius + bh / 2, }; // A bar magnet laid along the button: north pole right, south pole left. const poleOffset = Math.max(bw / 2 - bh / 3, bw / 4); const nx = box.cx + poleOffset; const sx = box.cx - poleOffset; filings = []; const cols = Math.ceil(width / spacing); const rows = Math.ceil(height / spacing); for (let row = 0; row <= rows; row++) { for (let col = 0; col <= cols; col++) { const x = col * spacing + (hash(col, row, 1) - 0.5) * spacing * 0.45; const y = row * spacing + (hash(col, row, 2) - 0.5) * spacing * 0.45; const dx = Math.max(box.left - x, 0, x - box.right); const dy = Math.max(box.top - y, 0, y - box.bottom); const edge = Math.hypot(dx, dy); const t = edge / radius; if (edge < CLEARANCE || t > 1) { continue; } const ndx = x - nx; const ndy = y - box.cy; const sdx = x - sx; const sdy = y - box.cy; const nd3 = Math.max(Math.hypot(ndx, ndy) ** 3, 1); const sd3 = Math.max(Math.hypot(sdx, sdy) ** 3, 1); const bx = ndx / nd3 - sdx / sd3; const by = ndy / nd3 - sdy / sd3; const rest = Math.atan2(by, bx); const cdx = box.cx - x; const cdy = box.cy - y; const cd = Math.hypot(cdx, cdy) || 1; filings.push({ x, y, restX: Math.cos(rest * 2), restY: Math.sin(rest * 2), inX: cdx / cd, inY: cdy / cd, t, fade: 1 - smoothstep(0.4, 1, t), len: FILING_LENGTH * (0.8 + hash(col, row, 3) * 0.4), theta: rest, omega: 0, near: 0, }); } } }; const targetAngle = (f: Filing) => { let vx = f.restX; let vy = f.restY; f.near = 0; if (pull > 0.001) { const w = pull * 0.6 * (1 - f.t * 0.4); const a = Math.atan2(f.inY, f.inX) * 2; vx = vx * (1 - w) + Math.cos(a) * w; vy = vy * (1 - w) + Math.sin(a) * w; } if (presence > 0.001) { const dx = pointer.x - f.x; const dy = pointer.y - f.y; const sigma = radius * 0.75; const w = presence * 0.92 * Math.exp(-(dx * dx + dy * dy) / sigma ** 2); f.near = w; if (w > 0.001) { const a = Math.atan2(dy, dx) * 2; vx = vx * (1 - w) + Math.cos(a) * w; vy = vy * (1 - w) + Math.sin(a) * w; } } return Math.atan2(vy, vx) / 2; }; const draw = () => { ctx.clearRect(0, 0, width, height); ctx.strokeStyle = ink; ctx.lineWidth = LINE_WIDTH; ctx.lineCap = "round"; for (const f of filings) { const alpha = f.fade * (REST_ALPHA + f.near * 0.4 + pull * 0.2); if (alpha < 0.01) { continue; } const shift = pull * 2.5 * (1 - f.t); const x = f.x + f.inX * shift; const y = f.y + f.inY * shift; const hx = (Math.cos(f.theta) * f.len) / 2; const hy = (Math.sin(f.theta) * f.len) / 2; ctx.globalAlpha = Math.min(1, alpha); ctx.beginPath(); ctx.moveTo(x - hx, y - hy); ctx.lineTo(x + hx, y + hy); ctx.stroke(); } ctx.globalAlpha = 1; }; const ease = (value: number, target: number, dt: number, tau: number) => { const next = value + (target - value) * (1 - Math.exp(-dt / tau)); return Math.abs(target - next) < 0.001 ? target : next; }; const step = (now: number) => { const dt = Math.min((now - last) / 1000, 1 / 30); last = now; presence = ease(presence, presenceTarget, dt, PRESENCE_TAU); pull = ease(pull, pullTarget, dt, PULL_TAU); let active = presence !== presenceTarget || pull !== pullTarget; for (const f of filings) { const diff = lineDelta(targetAngle(f), f.theta); f.omega += (STIFFNESS * diff - DAMPING * f.omega) * dt; f.theta += f.omega * dt; if (Math.abs(diff) > 0.002 || Math.abs(f.omega) > 0.02) { active = true; } } draw(); raf = active ? requestAnimationFrame(step) : 0; }; const kick = () => { if (reduced || !visible || raf) { return; } last = performance.now(); raf = requestAnimationFrame(step); }; const settleNow = () => { cancelAnimationFrame(raf); raf = 0; presence = 0; presenceTarget = 0; pullTarget = focused && !disabledRef.current ? 1 : 0; pull = pullTarget; for (const f of filings) { f.theta = Math.atan2(f.restY, f.restX) / 2; f.omega = 0; f.near = 0; } draw(); }; const track = (clientX: number, clientY: number) => { const rect = canvas.getBoundingClientRect(); const x = clientX - rect.left; const y = clientY - rect.top; const inField = x >= 0 && y >= 0 && x <= width && y <= height; const inButton = x >= box.left && x <= box.right && y >= box.top && y <= box.bottom; if (inField) { pointer.x = x; pointer.y = y; } const nextPresence = inField ? 1 : 0; const nextPull = (inButton || focused) && !disabledRef.current ? 1 : 0; if ( inField || nextPresence !== presenceTarget || nextPull !== pullTarget ) { presenceTarget = nextPresence; pullTarget = nextPull; kick(); } }; const release = () => { presenceTarget = 0; pullTarget = focused && !disabledRef.current ? 1 : 0; kick(); }; const handleMove = (event: PointerEvent) => { if (event.pointerType === "touch") { if (event.pointerId === touchId) { track(event.clientX, event.clientY); } return; } track(event.clientX, event.clientY); }; const handleUp = (event: PointerEvent) => { if (event.pointerId === touchId) { touchId = null; release(); } }; const handleOut = (event: PointerEvent) => { if (!event.relatedTarget && event.pointerType !== "touch") { release(); } }; let listening = false; const listen = (on: boolean) => { if (on === listening) { return; } listening = on; if (on) { window.addEventListener("pointermove", handleMove, { passive: true }); window.addEventListener("pointerup", handleUp); window.addEventListener("pointercancel", handleUp); document.addEventListener("pointerout", handleOut); window.addEventListener("blur", release); return; } window.removeEventListener("pointermove", handleMove); window.removeEventListener("pointerup", handleUp); window.removeEventListener("pointercancel", handleUp); document.removeEventListener("pointerout", handleOut); window.removeEventListener("blur", release); }; controlsRef.current = { setFocus: (on) => { focused = on; if (on && presenceTarget === 0) { pointer.x = box.cx; pointer.y = box.cy; } pullTarget = on && !disabledRef.current ? 1 : 0; kick(); }, touchStart: (event) => { if (reduced) { return; } touchId = event.pointerId; track(event.clientX, event.clientY); }, }; const redraw = () => { readInk(); draw(); }; const resizeObserver = new ResizeObserver(() => { layout(); readInk(); if (reduced) { draw(); } else { settleNow(); } }); resizeObserver.observe(wrapper); const intersectionObserver = new IntersectionObserver(([entry]) => { visible = entry?.isIntersecting ?? true; listen(visible && !reduced); if (!visible) { settleNow(); } }); intersectionObserver.observe(canvas); const handleMotionChange = () => { reduced = motionQuery.matches; listen(visible && !reduced); settleNow(); }; motionQuery.addEventListener("change", handleMotionChange); // Repaint in the new ink when the theme changes, even while settled. darkQuery.addEventListener("change", redraw); const themeObserver = new MutationObserver(redraw); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-theme"], }); return () => { cancelAnimationFrame(raf); listen(false); resizeObserver.disconnect(); intersectionObserver.disconnect(); themeObserver.disconnect(); motionQuery.removeEventListener("change", handleMotionChange); darkQuery.removeEventListener("change", redraw); controlsRef.current = null; }; }, [density, radius]); // Touch and pen-on-screen run the field only while pressed. const handlePointerDown = (event: ReactPointerEvent) => { onPointerDown?.(event); if (event.pointerType === "touch") { controlsRef.current?.touchStart(event.nativeEvent); } }; // Keyboard focus pulls the field in too; mouse focus does not hold it. const handleFocus = (event: FocusEvent) => { onFocus?.(event); if (event.currentTarget.matches(":focus-visible")) { controlsRef.current?.setFocus(true); } }; const handleBlur = (event: FocusEvent) => { onBlur?.(event); controlsRef.current?.setFocus(false); }; return (

); }

Magnet Button

On this page