Magnetic Button

"use client";

import * as React from "react";
import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "motion/react";

export interface MagneticButtonProps
  extends Omit<
    React.ComponentPropsWithoutRef<"button">,
    "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"
  > {
  /** How strongly the button follows the pointer, 0–100. */
  strength?: number;
  /** Extra distance (px) around the button where magnetism is active. */
  radius?: number;
  /** Spring used to settle the button. */
  spring?: { stiffness: number; damping: number; mass: number };
  /** Accent colour (any CSS colour). */
  accent?: string;
  /** Corner radius in px. */
  rounded?: number;
  variant?: "solid" | "outline";
}

/**
 * A button that is gently pulled toward the pointer within a bounded magnetic field.
 * Magnetism is disabled for touch input and when the user prefers reduced motion.
 */
export const MagneticButton = React.forwardRef<HTMLButtonElement, MagneticButtonProps>(function MagneticButton(
  {
    strength = 40,
    radius = 48,
    spring = { stiffness: 180, damping: 14, mass: 0.6 },
    accent = "#FF7448",
    rounded = 999,
    variant = "solid",
    className = "",
    style,
    disabled,
    children,
    ...props
  },
  ref,
) {
  const reduceMotion = useReducedMotion();
  const innerRef = React.useRef<HTMLButtonElement>(null);
  React.useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement);

  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const sx = useSpring(x, spring);
  const sy = useSpring(y, spring);
  // The label travels slightly further than the shell, giving a sense of depth.
  const lx = useTransform(sx, (v) => v * 0.35);
  const ly = useTransform(sy, (v) => v * 0.35);

  const active = !disabled && !reduceMotion && strength > 0;

  const handlePointerMove = (event: React.PointerEvent<HTMLSpanElement>) => {
    if (!active || event.pointerType !== "mouse" || !innerRef.current) return;
    const rect = innerRef.current.getBoundingClientRect();
    const dx = event.clientX - (rect.left + rect.width / 2);
    const dy = event.clientY - (rect.top + rect.height / 2);
    const factor = Math.min(Math.max(strength, 0), 100) / 100;
    x.set(dx * factor * 0.6);
    y.set(dy * factor * 0.6);
  };

  const reset = () => {
    x.set(0);
    y.set(0);
  };

  const variantClass =
    variant === "solid"
      ? "bg-[var(--mb-accent)] text-zinc-950 hover:brightness-110"
      : "border border-zinc-900/20 bg-transparent text-zinc-900 hover:border-[var(--mb-accent)] dark:border-white/20 dark:text-zinc-100";

  return (
    <span
      // The invisible field extends the hit area without shifting layout.
      className="inline-block"
      style={{ padding: radius, margin: -radius }}
      onPointerMove={handlePointerMove}
      onPointerLeave={reset}
    >
      <motion.button
        ref={innerRef}
        type="button"
        disabled={disabled}
        onBlur={reset}
        className={`relative inline-flex h-12 select-none items-center justify-center gap-2 px-7 text-sm font-medium tracking-tight transition-[filter,border-color,opacity] duration-200 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--mb-accent)] disabled:cursor-not-allowed disabled:opacity-50 ${variantClass} ${className}`}
        style={{ x: sx, y: sy, borderRadius: rounded, ["--mb-accent" as string]: accent, ...style }}
        {...props}
      >
        <motion.span className="inline-flex items-center gap-2" style={{ x: lx, y: ly }}>
          {children}
        </motion.span>
      </motion.button>
    </span>
  );
});