{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bend-button-follower",
  "description": "A rounded pill button with text that smoothly chases the cursor and warps with an air-friction bend on a WebGL plane.",
  "dependencies": [],
  "files": [
    {
      "path": "registry/new-york/mouse-follower/bend-button-follower.tsx",
      "content": "\"use client\";\n\n/**\n * A rounded button that smoothly trails the cursor, settling just to the bottom-right of it.\n */\n\nimport { useEffect, useRef } from \"react\";\n\nconst LABEL = \"HOVER ME\";\nconst GAP = 16; // how far below-right of the cursor the button settles\nconst lerp = (a: number, b: number, t: number) => a + (b - a) * t;\n\nconst Page = () => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const btnRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    const btn = btnRef.current;\n    if (!container || !btn) return;\n\n    const target = { x: 0, y: 0 }; // cursor + offset\n    const state = { x: 0, y: 0 }; // where the button actually is (lags behind)\n    let inside = false;\n    let raf = 0;\n\n    const onMove = (e: PointerEvent) => {\n      const r = container.getBoundingClientRect();\n      inside =\n        e.clientX >= r.left &&\n        e.clientX <= r.right &&\n        e.clientY >= r.top &&\n        e.clientY <= r.bottom;\n      if (inside) {\n        target.x = e.clientX - r.left + GAP;\n        target.y = e.clientY - r.top + GAP;\n      }\n    };\n\n    const tick = () => {\n      state.x = lerp(state.x, target.x, 0.12);\n      state.y = lerp(state.y, target.y, 0.12);\n      btn.style.transform = `translate(${state.x}px, ${state.y}px)`;\n      btn.style.opacity = inside ? \"1\" : \"0\";\n      raf = requestAnimationFrame(tick);\n    };\n\n    window.addEventListener(\"pointermove\", onMove);\n    raf = requestAnimationFrame(tick);\n    return () => {\n      window.removeEventListener(\"pointermove\", onMove);\n      cancelAnimationFrame(raf);\n    };\n  }, []);\n\n  return (\n    <div ref={containerRef} className=\"absolute inset-0 overflow-hidden\">\n      <div\n        ref={btnRef}\n        className=\"pointer-events-none absolute left-0 top-0 whitespace-nowrap rounded-full bg-foreground px-8 py-4 text-base font-semibold tracking-wide text-background opacity-0 shadow-lg transition-opacity\"\n      >\n        {LABEL}\n      </div>\n    </div>\n  );\n};\n\nexport default Page;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/bend-button-follower.tsx"
    }
  ],
  "type": "registry:block"
}