Magnetic Button

1"use client";
2 
3import { useRef, type ReactNode, type ComponentPropsWithoutRef } from "react";
4import {
5  motion,
6  useMotionValue,
7  useReducedMotion,
8  useSpring,
9} from "motion/react";
10 
11/**
12 * Native button props minus the handlers Motion redefines with its own
13 * signatures — spreading React's DOM versions onto `motion.button` conflicts.
14 */
15type NativeButtonProps = Omit<
16  ComponentPropsWithoutRef<"button">,
17  | "ref"
18  | "style"
19  | "onAnimationStart"
20  | "onAnimationEnd"
21  | "onAnimationIteration"
22  | "onDrag"
23  | "onDragStart"
24  | "onDragEnd"
25>;
26 
27interface MagneticButtonProps extends NativeButtonProps {
28  children: ReactNode;
29  /** How far the button travels toward the pointer, in pixels. */
30  strength?: number;
31  /** Distance from the button, in pixels, at which it starts reacting. */
32  radius?: number;
33  className?: string;
34}
35 
36/**
37 * A button that drifts toward the pointer as it approaches, then springs back
38 * when the pointer leaves.
39 */
40export function MagneticButton({
41  children,
42  strength = 18,
43  radius = 120,
44  className = "",
45  ...props
46}: MagneticButtonProps) {
47  const ref = useRef<HTMLButtonElement>(null);
48  const prefersReducedMotion = useReducedMotion();
49 
50  const spring = { stiffness: 200, damping: 15, mass: 0.4 };
51  const x = useSpring(useMotionValue(0), spring);
52  const y = useSpring(useMotionValue(0), spring);
53 
54  const handlePointerMove = (event: React.PointerEvent<HTMLButtonElement>) => {
55    const element = ref.current;
56    if (!element || prefersReducedMotion) return;
57 
58    const rect = element.getBoundingClientRect();
59    const dx = event.clientX - (rect.left + rect.width / 2);
60    const dy = event.clientY - (rect.top + rect.height / 2);
61    const distance = Math.hypot(dx, dy);
62 
63    if (distance > radius) {
64      x.set(0);
65      y.set(0);
66      return;
67    }
68 
69    // Falls off linearly with distance so the pull eases in.
70    const pull = 1 - distance / radius;
71    x.set((dx / radius) * strength * pull * 2);
72    y.set((dy / radius) * strength * pull * 2);
73  };
74 
75  const reset = () => {
76    x.set(0);
77    y.set(0);
78  };
79 
80  return (
81    <motion.button
82      ref={ref}
83      style={{ x, y }}
84      onPointerMove={handlePointerMove}
85      onPointerLeave={reset}
86      onBlur={reset}
87      whileTap={prefersReducedMotion ? undefined : { scale: 0.95 }}
88// … truncated