{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pointer-spotlight",
  "title": "Pointer Spotlight",
  "description": "Fine-pointer surface highlight with keyboard and touch fallbacks.",
  "registryDependencies": [
    "https://components.exe.xyz/r/use-reduced-motion.json"
  ],
  "files": [
    {
      "path": "src/components/effects/pointer-spotlight.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useReducedMotion } from \"@/hooks/use-reduced-motion\"\n\n/*\n * SPDX-License-Identifier: MIT\n * Inspired by Amicro's Spotlight by Syed Subhan Uddin.\n * Upstream: https://github.com/Subhan-code/Amicro--Micro-transitions-\n * Source: registry/ui/cursor/spotlight.tsx\n * Audited revision: 07adc1640084940f045875e2bb1b682c90f30c3c\n * This implementation is an original accessible React/CSS adaptation.\n */\n\nexport type PointerSpotlightProps = React.HTMLAttributes<HTMLDivElement> & {\n  color?: string\n  radius?: number\n  intensity?: number\n}\n\nexport function PointerSpotlight({\n  color = \"99 102 241\",\n  radius = 180,\n  intensity = 0.18,\n  className = \"\",\n  style,\n  children,\n  onPointerMove,\n  onPointerLeave,\n  onFocus,\n  onBlur,\n  ...props\n}: PointerSpotlightProps) {\n  const ref = React.useRef<HTMLDivElement>(null)\n  const reduced = useReducedMotion()\n\n  const setSpotlight = React.useCallback(\n    (x: number, y: number, visible: boolean) => {\n      const element = ref.current\n      if (!element) return\n      element.style.setProperty(\"--spotlight-x\", `${x}px`)\n      element.style.setProperty(\"--spotlight-y\", `${y}px`)\n      element.style.setProperty(\"--spotlight-opacity\", visible ? \"1\" : \"0\")\n    },\n    []\n  )\n\n  return (\n    <div\n      ref={ref}\n      data-pointer-spotlight=\"\"\n      className={`relative isolate overflow-hidden ${className}`}\n      style={\n        {\n          \"--spotlight-color\": color,\n          \"--spotlight-radius\": `${radius}px`,\n          \"--spotlight-strength\": intensity,\n          \"--spotlight-opacity\": 0,\n          ...style,\n        } as React.CSSProperties\n      }\n      onPointerMove={(event) => {\n        onPointerMove?.(event)\n        if (reduced || event.pointerType !== \"mouse\") return\n        const rect = event.currentTarget.getBoundingClientRect()\n        setSpotlight(event.clientX - rect.left, event.clientY - rect.top, true)\n      }}\n      onPointerLeave={(event) => {\n        onPointerLeave?.(event)\n        setSpotlight(0, 0, false)\n      }}\n      onFocus={(event) => {\n        onFocus?.(event)\n        const rect = event.currentTarget.getBoundingClientRect()\n        setSpotlight(rect.width / 2, rect.height / 2, !reduced)\n      }}\n      onBlur={(event) => {\n        onBlur?.(event)\n        setSpotlight(0, 0, false)\n      }}\n      {...props}\n    >\n      <style>{`\n        [data-pointer-spotlight]::before {\n          background: radial-gradient(circle var(--spotlight-radius) at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgb(var(--spotlight-color) / var(--spotlight-strength)), transparent 68%);\n          content: \"\";\n          inset: 0;\n          opacity: var(--spotlight-opacity);\n          pointer-events: none;\n          position: absolute;\n          transition: opacity 180ms ease;\n          z-index: -1;\n        }\n        @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {\n          [data-pointer-spotlight]::before { display: none; }\n        }\n      `}</style>\n      {children}\n    </div>\n  )\n}\n",
      "type": "registry:ui",
      "target": "src/components/effects/pointer-spotlight.tsx"
    }
  ],
  "meta": {
    "collection": "motion-effects",
    "license": "MIT",
    "usage": "<PointerSpotlight className=\"rounded-xl border p-6\">\n  <h2>Highlighted surface</h2>\n</PointerSpotlight>",
    "source": "https://github.com/Subhan-code/Amicro--Micro-transitions-",
    "sourcePath": "registry/ui/cursor/spotlight.tsx",
    "sourceRevision": "07adc1640084940f045875e2bb1b682c90f30c3c"
  },
  "type": "registry:ui"
}