{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnetic",
  "title": "Magnetic",
  "description": "Wrap anything to make it drift toward the cursor on a spring.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/new-york/magnetic/magnetic.tsx",
      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport { motion, useMotionValue, useReducedMotion, useSpring } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface MagneticProps {\n  children: React.ReactNode\n  /** How far the element follows the cursor, 0 to 1. Default: 0.35 */\n  strength?: number\n  /** Extra hit area around the element, in px. Default: 40 */\n  range?: number\n  /** Spring stiffness. Higher = snappier. Default: 180 */\n  stiffness?: number\n  /** Spring damping. Higher = less wobble. Default: 14 */\n  damping?: number\n  className?: string\n}\n\nexport function Magnetic({\n  children,\n  strength = 0.35,\n  range = 40,\n  stiffness = 180,\n  damping = 14,\n  className,\n}: MagneticProps) {\n  const ref = useRef<HTMLDivElement>(null)\n  const reduced = useReducedMotion()\n\n  const spring = { stiffness, damping, mass: 0.2 }\n  const x = useSpring(useMotionValue(0), spring)\n  const y = useSpring(useMotionValue(0), spring)\n\n  const onPointerMove = (e: React.PointerEvent) => {\n    if (reduced || !ref.current) return\n    const rect = ref.current.getBoundingClientRect()\n    x.set((e.clientX - (rect.left + rect.width / 2)) * strength)\n    y.set((e.clientY - (rect.top + rect.height / 2)) * strength)\n  }\n\n  const reset = () => {\n    x.set(0)\n    y.set(0)\n  }\n\n  return (\n    // The outer padding widens the area that \"catches\" the cursor\n    <div\n      className={cn(\"inline-block\", className)}\n      style={{ padding: range, margin: -range }}\n      onPointerMove={onPointerMove}\n      onPointerLeave={reset}\n    >\n      <motion.div ref={ref} style={{ x, y }} className=\"inline-block\">\n        {children}\n      </motion.div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/magnetic",
  "type": "registry:component"
}