Magnet Snap Button

"use client";

import { useEffect, useRef } from "react";
import {
  motion,
  useMotionValue,
  useSpring,
  useTransform,
  type SpringOptions,
  type HTMLMotionProps,
} from "motion/react";
import { cva, type VariantProps } from "class-variance-authority";

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

/* ------------------------------------------------------------------ */
/*  Types                                                              */
/* ------------------------------------------------------------------ */

export const magneticButtonVariants = cva(
  cn(
    "relative inline-flex items-center justify-center gap-2 whitespace-nowrap",
    "rounded-full text-sm font-medium select-none transition-colors",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-500/60",
    "focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-950",
    "disabled:pointer-events-none disabled:opacity-50",
  ),
  {
    variants: {
      variant: {
        default: cn(
          "bg-zinc-900 text-white hover:bg-zinc-700",
          "dark:bg-white dark:text-zinc-900 dark:hover:bg-zinc-200",
        ),
        outline: cn(
          "border border-zinc-300 bg-transparent text-zinc-800 hover:border-zinc-500",
          "dark:border-zinc-700 dark:text-zinc-200 dark:hover:border-zinc-400",
        ),
        ghost: cn(
          "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900",
          "dark:text-zinc-400 dark:hover:bg-zinc-800/70 dark:hover:text-zinc-100",
        ),
      },
      size: {
        default: "h-10 px-5",
        lg: "h-12 px-7 text-base",
      },
    },
    defaultVariants: { variant: "default", size: "default" },
  },
);

export interface MagnetSnapButtonProps
  extends Omit<HTMLMotionProps<"button">, "style">,
    VariantProps<typeof magneticButtonVariants> {
  /** Attraction radius in px, measured from the button center. [Optional, default: 140] */
  radius?: number;
  /** Pull strength multiplier, 0 to 1. [Optional, default: 0.4] */
  strength?: number;
  /** Spring used for the pull and release. [Optional] */
  springOptions?: SpringOptions;
}

/* ------------------------------------------------------------------ */
/*  MagnetSnapButton                                                     */
/* ------------------------------------------------------------------ */

/**
 * A button that leans toward the cursor while it travels inside an
 * attraction radius, then springs back on exit. The pointer is tracked
 * at the window level so the pull starts before the cursor ever touches
 * the button, and the label drifts a little further than the body for a
 * subtle parallax. Attraction is skipped under prefers-reduced-motion
 * and on coarse (touch) pointers.
 * @param {number} radius - Attraction radius in px [Optional, default: 140]
 * @param {number} strength - Pull multiplier 0 to 1 [Optional, default: 0.4]
 * @param {SpringOptions} springOptions - Pull/release spring [Optional]
 */
export function MagnetSnapButton({
  children,
  radius = 140,
  strength = 0.4,
  springOptions = { stiffness: 160, damping: 16, mass: 0.1 },
  variant,
  size,
  className,
  ...props
}: MagnetSnapButtonProps) {
  const ref = useRef<HTMLButtonElement>(null);

  const rawX = useMotionValue(0);
  const rawY = useMotionValue(0);
  const x = useSpring(rawX, springOptions);
  const y = useSpring(rawY, springOptions);
  // The label overshoots the body slightly for depth.
  const labelX = useTransform(x, (v) => v * 0.42);
  const labelY = useTransform(y, (v) => v * 0.42);

  useEffect(() => {
    const prefersStill =
      window.matchMedia("(prefers-reduced-motion: reduce)").matches ||
      window.matchMedia("(pointer: coarse)").matches;
    if (prefersStill) return;

    const onPointerMove = (e: PointerEvent) => {
      const el = ref.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const dx = e.clientX - (rect.left + rect.width / 2);
      const dy = e.clientY - (rect.top + rect.height / 2);
      const dist = Math.hypot(dx, dy);

      if (dist < radius) {
        const pull = (1 - dist / radius) * strength;
        rawX.set(dx * pull);
        rawY.set(dy * pull);
      } else {
        rawX.set(0);
        rawY.set(0);
      }
    };
    const release = () => {
      rawX.set(0);
      rawY.set(0);
    };

    window.addEventListener("pointermove", onPointerMove, { passive: true });
    document.documentElement.addEventListener("pointerleave", release);
    return () => {
      window.removeEventListener("pointermove", onPointerMove);
      document.documentElement.removeEventListener("pointerleave", release);
    };
  }, [radius, strength, rawX, rawY]);

  return (
    <motion.button
      ref={ref}
      style={{ x, y }}
      whileTap={{ scale: 0.97 }}
      className={cn(magneticButtonVariants({ variant, size }), className)}
      {...props}
    >
      <motion.span
        style={{ x: labelX, y: labelY }}
        className="inline-flex items-center gap-2 font-medium"
      >
        {children}
      </motion.span>
    </motion.button>
  );
}