Magnetic Button

1'use client'
2 
3import * as React from 'react'
4import {
5  motion,
6  useMotionValue,
7  useReducedMotion,
8  useSpring,
9  type SpringOptions,
10} from 'motion/react'
11 
12import { Button } from '@/components/ui/button'
13import { cn } from '@/lib/utils'
14 
15type MagneticButtonProps = React.ComponentProps<typeof Button> & {
16  movement?: number
17  wrapperClassName?: string
18  springOptions?: SpringOptions
19}
20 
21const defaultSpringOptions: SpringOptions = {
22  stiffness: 180,
23  damping: 10,
24  mass: 0.5,
25}
26 
27function MagneticButton({
28  children,
29  className,
30  wrapperClassName,
31  movement = 6,
32  springOptions = defaultSpringOptions,
33  disabled,
34  onPointerMove,
35  onPointerLeave,
36  onPointerCancel,
37  ...props
38}: MagneticButtonProps) {
39  const prefersReducedMotion = useReducedMotion()
40  const x = useMotionValue(0)
41  const y = useMotionValue(0)
42  const springX = useSpring(x, springOptions)
43  const springY = useSpring(y, springOptions)
44 
45  function resetPosition() {
46    x.set(0)
47    y.set(0)
48  }
49 
50  function handlePointerMove(event: React.PointerEvent<HTMLButtonElement>) {
51    onPointerMove?.(event)
52 
53    if (
54      event.defaultPrevented ||
55      disabled ||
56      prefersReducedMotion ||
57      event.pointerType !== 'mouse'
58    ) {
59      return
60    }
61 
62    const rect = event.currentTarget.getBoundingClientRect()
63    const centerX = rect.width / 2
64    const centerY = rect.height / 2
65    const pointerX = event.clientX - rect.left
66    const pointerY = event.clientY - rect.top
67 
68    x.set(((pointerX - centerX) / centerX) * movement)
69    y.set(((pointerY - centerY) / centerY) * movement)
70  }
71 
72  function handlePointerLeave(event: React.PointerEvent<HTMLButtonElement>) {
73    onPointerLeave?.(event)
74 
75    if (!event.defaultPrevented) resetPosition()
76  }
77 
78  function handlePointerCancel(event: React.PointerEvent<HTMLButtonElement>) {
79    onPointerCancel?.(event)
80 
81    if (!event.defaultPrevented) resetPosition()
82  }
83 
84  return (
85    <motion.span
86      data-slot="magnetic-button-wrapper"
87      style={{ x: springX, y: springY }}
88      whileTap={disabled || prefersReducedMotion ? undefined : { scale: 0.98 }}
89      className={cn(
90        'inline-flex will-change-transform motion-reduce:transform-none',
91        wrapperClassName,
92      )}
93    >
94      <Button
95        data-slot="magnetic-button"
96        disabled={disabled}
97        onPointerMove={handlePointerMove}
98        onPointerLeave={handlePointerLeave}
99        onPointerCancel={handlePointerCancel}
100        className={cn(
101// … truncated