{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-flair-button",
  "description": "A pill button with a directional color flair: stacked concentric circles bloom from",
  "dependencies": [
    "@gsap/react",
    "gsap"
  ],
  "files": [
    {
      "path": "registry/new-york/motion-framer/color-flair-button.tsx",
      "content": "/**\n * A pill button with a directional color flair: stacked concentric circles bloom from\n * the cursor's entry point (GSAP staggered scale), trail it with per-circle lag, and\n * peel back inner→outer on exit.\n */\n\"use client\";\n\nimport { useRef } from \"react\";\nimport { useGSAP } from \"@gsap/react\";\nimport gsap from \"gsap\";\n\ngsap.registerPlugin(useGSAP);\n\nconst FLAIRS = [\n  { color: \"#A5A6F6\", size: \"210%\" }, // purple\n  { color: \"#7BD88F\", size: \"158%\" }, // green\n  { color: \"#FFD36E\", size: \"112%\" }, // yellow\n  { color: \"#FF9BB3\", size: \"70%\" }, // coral\n];\n\nconst ColorFlairButton = () => {\n  const buttonRef = useRef<HTMLAnchorElement>(null);\n\n  useGSAP(\n    () => {\n      const button = buttonRef.current;\n      if (!button) return;\n\n      const flairs = Array.from(\n        button.querySelectorAll<HTMLElement>(\".flair\"),\n      );\n\n      gsap.set(flairs, { xPercent: -50, yPercent: -50, scale: 0 });\n\n      const move = flairs.map((f, i) => {\n        const duration = 0.65 - i * 0.12; // 0.65 → 0.29 across the stack\n        return {\n          x: gsap.quickTo(f, \"x\", { duration, ease: \"power3\" }),\n          y: gsap.quickTo(f, \"y\", { duration, ease: \"power3\" }),\n          xSet: gsap.quickSetter(f, \"x\", \"px\"),\n          ySet: gsap.quickSetter(f, \"y\", \"px\"),\n        };\n      });\n\n      const getXY = (e: MouseEvent) => {\n        const { left, top } = button.getBoundingClientRect();\n        return { x: e.clientX - left, y: e.clientY - top };\n      };\n\n      const onEnter = (e: MouseEvent) => {\n        const { x, y } = getXY(e);\n        move.forEach((m) => {\n          m.xSet(x); // teleport every circle to the entry point...\n          m.ySet(y);\n        });\n        gsap.to(flairs, {\n          scale: 1,\n          duration: 0.4,\n          ease: \"power3.out\",\n          stagger: 0.08,\n          overwrite: \"auto\",\n        });\n      };\n\n      const onMove = (e: MouseEvent) => {\n        const { x, y } = getXY(e);\n        move.forEach((m) => {\n          m.x(x);\n          m.y(y);\n        });\n      };\n\n      const onLeave = (e: MouseEvent) => {\n        const { x, y } = getXY(e);\n        move.forEach((m) => {\n          m.x(x);\n          m.y(y);\n        });\n        gsap.to(flairs, {\n          scale: 0,\n          duration: 0.35,\n          ease: \"power3.out\",\n          stagger: { each: 0.07, from: \"end\" },\n          overwrite: \"auto\",\n        });\n      };\n\n      button.addEventListener(\"mouseenter\", onEnter);\n      button.addEventListener(\"mousemove\", onMove);\n      button.addEventListener(\"mouseleave\", onLeave);\n\n      return () => {\n        button.removeEventListener(\"mouseenter\", onEnter);\n        button.removeEventListener(\"mousemove\", onMove);\n        button.removeEventListener(\"mouseleave\", onLeave);\n      };\n    },\n    { scope: buttonRef },\n  );\n\n  return (\n    <div className=\"grid place-items-center p-6\">\n      <a\n        ref={buttonRef}\n        href=\"#\"\n        className=\"relative inline-flex items-center overflow-hidden rounded-full border border-black px-8 py-4 text-lg font-medium text-black\"\n      >\n        {FLAIRS.map((f) => (\n          <span\n            key={f.color}\n            className=\"flair pointer-events-none absolute top-0 left-0 aspect-square rounded-full\"\n            style={{ width: f.size, backgroundColor: f.color }}\n          />\n        ))}\n        <span className=\"relative z-10\">Visit the forum</span>\n      </a>\n    </div>\n  );\n};\n\nexport default ColorFlairButton;\n",
      "type": "registry:component",
      "target": "components/pixel-perfect/color-flair-button.tsx"
    }
  ],
  "type": "registry:block"
}