Magnetic Button

1"use client"
2 
3import * as React from "react"
4import { motion, useMotionValue, useSpring } from "motion/react"
5import { cn } from "@/registry/wise-ui/lib/utils"
6 
7interface MagneticButtonProps
8  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
9  /** How far the button can travel toward the cursor (px) */
10  strength?: number
11  /** Radius around the button that activates the magnetic pull (px) */
12  range?: number
13  children: React.ReactNode
14}
15 
16const springConfig = { stiffness: 200, damping: 15, mass: 0.5 }
17 
18const MagneticButton = React.forwardRef<
19  HTMLButtonElement,
20  MagneticButtonProps
21>(
22  (
23    {
24      strength = 12,
25      range = 150,
26      children,
27      disabled,
28      className,
29      ...props
30    },
31    ref
32  ) => {
33    const containerRef = React.useRef<HTMLDivElement>(null)
34 
35    const rawX = useMotionValue(0)
36    const rawY = useMotionValue(0)
37    const x = useSpring(rawX, springConfig)
38    const y = useSpring(rawY, springConfig)
39 
40    React.useEffect(() => {
41      const el = containerRef.current
42      if (!el || disabled) return
43 
44      function handleMouseMove(e: MouseEvent) {
45        const rect = el!.getBoundingClientRect()
46        const centerX = rect.left + rect.width / 2
47        const centerY = rect.top + rect.height / 2
48        const distX = e.clientX - centerX
49        const distY = e.clientY - centerY
50        const dist = Math.sqrt(distX * distX + distY * distY)
51 
52        if (dist < range) {
53          const pull = 1 - dist / range
54          rawX.set(distX * pull * (strength / range) * 2)
55          rawY.set(distY * pull * (strength / range) * 2)
56        } else {
57          rawX.set(0)
58          rawY.set(0)
59        }
60      }
61 
62      function handleMouseLeave() {
63        rawX.set(0)
64        rawY.set(0)
65      }
66 
67      window.addEventListener("mousemove", handleMouseMove)
68      el.addEventListener("mouseleave", handleMouseLeave)
69      return () => {
70        window.removeEventListener("mousemove", handleMouseMove)
71        el.removeEventListener("mouseleave", handleMouseLeave)
72      }
73    }, [disabled, range, strength, rawX, rawY])
74 
75    return (
76      <motion.div
77        ref={containerRef}
78        className="inline-flex"
79        style={{ x, y }}
80      >
81        <button
82          ref={ref}
83          disabled={disabled}
84          className={cn(
85            "relative inline-flex cursor-pointer items-center gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent",
86// … truncated