Magnetic

1"use client"
2 
3import * as React from "react"
4import { Slot } from "@radix-ui/react-slot"
5 
6import { cn } from "@/lib/utils"
7 
8export interface MagneticProps extends React.ComponentProps<"div"> {
9  /** How far the child follows the pointer, as a fraction of the offset. */
10  strength?: number
11  /** Pixels of slack around the element that still count as near. */
12  radius?: number
13  /** Largest pull in pixels, whatever the radius says. */
14  max?: number
15  /** Merge onto the single child instead of rendering a wrapper div. */
16  asChild?: boolean
17  /** Render the child with no pull. */
18  disabled?: boolean
19}
20 
21export function Magnetic({
22  children,
23  className,
24  strength = 0.35,
25  radius = 80,
26  max = 16,
27  asChild = false,
28  disabled = false,
29  style,
30  ...props
31}: MagneticProps) {
32  const ref = React.useRef<HTMLDivElement>(null)
33  const frame = React.useRef(0)
34  const Comp = asChild ? Slot : "div"
35 
36  const reset = React.useCallback(() => {
37    cancelAnimationFrame(frame.current)
38    const node = ref.current
39    if (node) {
40      node.style.translate = "0px 0px"
41    }
42  }, [])
43 
44  React.useEffect(() => {
45    if (disabled) {
46      reset()
47      return
48    }
49 
50    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)")
51    if (reduced.matches) {
52      return
53    }
54 
55    // Listening on the window rather than the element itself means the pull
56    // starts before the pointer arrives, which is the whole effect.
57    const onPointerMove = (event: PointerEvent) => {
58      cancelAnimationFrame(frame.current)
59      frame.current = requestAnimationFrame(() => {
60        const node = ref.current
61        if (!node) {
62          return
63        }
64 
65        const rect = node.getBoundingClientRect()
66        const dx = event.clientX - (rect.left + rect.width / 2)
67        const dy = event.clientY - (rect.top + rect.height / 2)
68        const near =
69          Math.abs(dx) < rect.width / 2 + radius &&
70          Math.abs(dy) < rect.height / 2 + radius
71 
72        if (!near) {
73          node.style.translate = "0px 0px"
74          return
75        }
76 
77        const clamp = (value: number) =>
78          Math.max(-max, Math.min(max, value * strength))
79        node.style.translate = `${clamp(dx)}px ${clamp(dy)}px`
80      })
81    }
82 
83    window.addEventListener("pointermove", onPointerMove, { passive: true })
84    return () => {
85      window.removeEventListener("pointermove", onPointerMove)
86      cancelAnimationFrame(frame.current)
87    }
88  }, [disabled, radius, max, strength, reset])
89 
90// … truncated