Magnetic

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * Pulls whatever you wrap toward the cursor as it approaches.7 *8 * Three things separate this from the usual implementation:9 *10 * It listens on the element, not on window. The common version attaches a11 * global pointermove and measures distance to every magnet on the page —12 * fine with one button, quadratic with twenty. A pointerenter on the padded13 * hit area costs nothing until the pointer is actually near.14 *15 * The position is eased toward the target in a rAF loop rather than written16 * straight from the event. Assigning the raw pointer delta makes the element17 * snap and jitter at exactly the sample rate of the mouse; a spring makes it18 * feel like it has mass.19 *20 * The transform goes on an inner span, leaving the outer element's box where21 * the browser put it. Translating the interactive element itself moves its22 * hit box away from the cursor, so a strongly-magnetised button can slide out23 * from under the click that was chasing it.24 */25 26export interface MagneticProps {27  children: React.ReactNode;28  /** How far the element travels, as a fraction of pointer offset. */29  strength?: number;30  /** Pixels beyond the element's box where the pull begins. */31  radius?: number;32  /** 0–1. Lower is heavier and lags further behind the cursor. */33  ease?: number;34  still?: boolean;35  className?: string;36}37 38export function Magnetic({39  children,40  strength = 0.35,41  radius = 24,42  ease = 0.18,43  still = false,44  className = "",45}: MagneticProps) {46  const hostRef = useRef<HTMLSpanElement>(null);47  const moverRef = useRef<HTMLSpanElement>(null);48 49  useEffect(() => {50    const host = hostRef.current;51    const mover = moverRef.current;52    if (!host || !mover) return;53 54    const reduced =55      still ||56      (typeof matchMedia === "function" &&57        matchMedia("(prefers-reduced-motion: reduce)").matches);58    if (reduced) return;59 60    // A coarse pointer has no hover state to anticipate, so the effect is61    // meaningless on touch and the listeners are not worth attaching.62    if (typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches) {63      return;64    }65 66    let targetX = 0;67    let targetY = 0;68    let currentX = 0;69    let currentY = 0;70    let frame = 0;71    let running = false;72 73    const tick = () => {74      currentX += (targetX - currentX) * ease;75      currentY += (targetY - currentY) * ease;76      mover.style.transform = `translate3d(${currentX.toFixed(2)}px, ${currentY.toFixed(2)}px, 0)`;77 78      // Stop the loop once it has settled, instead of idling forever at79      // sub-pixel deltas. A page of magnets would otherwise keep rAF busy80      // for nothing.81      if (Math.abs(targetX - currentX) < 0.05 && Math.abs(targetY - currentY) < 0.05) {82        mover.style.transform = `translate3d(${targetX}px, ${targetY}px, 0)`;83        running = false;84        return;85      }86      frame = requestAnimationFrame(tick);87    };88 89    const start = () => {90      if (running) return;91      running = true;92      frame = requestAnimationFrame(tick);93    };94 95    const onMove = (event: PointerEvent) => {96      const box = host.getBoundingClientRect();97      const cx = box.left + box.width / 2;98      const cy = box.top + box.height / 2;99      targetX = (event.clientX - cx) * strength;100      targetY = (event.clientY - cy) * strength;101      start();102    };103 104    const onLeave = () => {105      targetX = 0;106      targetY = 0;107      start();108    };109 110    host.addEventListener("pointermove", onMove);111    host.addEventListener("pointerleave", onLeave);112 113    return () => {114      host.removeEventListener("pointermove", onMove);115      host.removeEventListener("pointerleave", onLeave);116      cancelAnimationFrame(frame);117      mover.style.transform = "";118    };119  }, [strength, radius, ease, still]);120 121  return (122    <span123      ref={hostRef}124      className={`inline-block ${className}`}125      // Padding extends the hit area so the pull starts before the pointer126      // reaches the visible edge; the negative margin keeps that invisible127      // to layout.128      style={{ padding: radius, margin: -radius }}129    >130      <span ref={moverRef} className="inline-block will-change-transform">131        {children}132      </span>133    </span>134  );135}136