Magnetic wrap

"use client";

import * as React from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

import { cn } from "@/lib/utils";

gsap.registerPlugin(useGSAP);

const LIVE = "(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)";

type MagneticWrapProps = React.ComponentProps<"div"> & {
  /** How far from the centre the pull reaches, in px. */
  radius?: number;
  /** How much of the pointer's offset the control follows near its centre, from 0 to 1. */
  strength?: number;
};

/**
 * Wraps one control and pulls it toward the pointer within a radius. The outer box never moves, so
 * the measurement cannot chase itself, and the child is left untouched. Off on touch and under
 * reduced motion, where this is two plain boxes.
 */
function MagneticWrap({ radius = 120, strength = 0.5, className, children, ...props }: MagneticWrapProps) {
  const root = React.useRef<HTMLDivElement>(null);
  const moving = React.useRef<HTMLDivElement>(null);

  useGSAP(
    () => {
      const media = gsap.matchMedia();
      media.add(LIVE, () => {
        const toX = gsap.quickTo(moving.current, "x", { duration: 0.5, ease: "power3.out" });
        const toY = gsap.quickTo(moving.current, "y", { duration: 0.5, ease: "power3.out" });

        const follow = (event: PointerEvent) => {
          const box = root.current?.getBoundingClientRect();
          if (!box) return;
          const dx = event.clientX - (box.left + box.width / 2);
          const dy = event.clientY - (box.top + box.height / 2);
          const t = Math.hypot(dx, dy) / radius;
          // Follows near the centre and fades to nothing at the edge, so crossing the radius never jumps.
          const pull = t < 1 ? strength * (1 - t * t) ** 2 : 0;
          toX(dx * pull);
          toY(dy * pull);
        };
        const rest = () => {
          toX(0);
          toY(0);
        };

        window.addEventListener("pointermove", follow, { passive: true });
        document.documentElement.addEventListener("pointerleave", rest);
        return () => {
          window.removeEventListener("pointermove", follow);
          document.documentElement.removeEventListener("pointerleave", rest);
        };
      });
      return () => media.revert();
    },
    { scope: root, dependencies: [radius, strength], revertOnUpdate: true },
  );

  return (
    <div ref={root} data-slot="magnetic-wrap" className={cn("inline-flex", className)} {...props}>
      <div ref={moving} className="inline-flex">
        {children}
      </div>
    </div>
  );
}

export { MagneticWrap };