{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-logo",
  "title": "Spotlight Logo",
  "author": "ncdai <dai@chanhdai.com>",
  "description": "SVG logo with a cursor-tracking gradient highlight and tactile press.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@soundcn/metal-click"
  ],
  "files": [
    {
      "path": "src/registry/components/spotlight-logo/spotlight-logo.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useId, useRef } from \"react\"\nimport type { Transition } from \"motion/react\"\nimport {\n  motion,\n  useInView,\n  useMotionValue,\n  useReducedMotion,\n  useSpring,\n  useTransform,\n} from \"motion/react\"\n\nimport { metalClickSound } from \"@/lib/soundcn/metal-click\"\nimport { useSound } from \"@/hooks/soundcn/use-sound\"\n\nconst transition: Transition = {\n  type: \"spring\",\n  mass: 0.5,\n  damping: 18,\n  stiffness: 200,\n}\n\n/**\n * An SVG mark whose outline is traced by a gradient highlight that follows the\n * cursor, paired with a springy press effect and a tactile click sound.\n *\n * Swap the SVG paths below for your own artwork. The interaction is driven by:\n * - a `radialGradient` whose center springs toward the pointer (the spotlight),\n *   reused as a second stroke layered over the base outline.\n * - `whileTap=\"pressed\"` morphing the path `d` values between two states.\n *\n * The demo mark was designed by ncdai on Figma with the\n * [Fast Isometric Plugin](https://www.figma.com/community/plugin/1249759048471403961).\n * Inspired by tailwindcss.com.\n */\nexport function SpotlightLogo() {\n  const id = useId()\n  const ids = {\n    facePattern: `spotlight-logo-face-pattern-${id}`,\n    faceFill: `spotlight-logo-face-fill-${id}`,\n    stroke: `spotlight-logo-stroke-${id}`,\n    radialGradient: `spotlight-logo-radial-gradient-${id}`,\n  }\n\n  const ref = useRef<SVGSVGElement>(null)\n\n  const [play] = useSound(metalClickSound)\n\n  const shouldReduceMotion = useReducedMotion()\n  const isInView = useInView(ref, { margin: \"80px\" })\n\n  const mouseX = useMotionValue(0.5)\n  const mouseY = useMotionValue(0.5)\n\n  const cx = useSpring(useTransform(mouseX, [0, 1], [0, 556]), {\n    stiffness: 300,\n    damping: 30,\n    mass: 0.1,\n  })\n\n  const cy = useSpring(useTransform(mouseY, [0, 1], [0, 354]), {\n    stiffness: 300,\n    damping: 30,\n    mass: 0.1,\n  })\n\n  useEffect(() => {\n    if (shouldReduceMotion || !isInView) {\n      return\n    }\n\n    if (window.matchMedia(\"(hover: none)\").matches) {\n      return\n    }\n\n    const handleMouseMove = (e: MouseEvent) => {\n      mouseX.set(e.clientX / window.innerWidth)\n      mouseY.set(e.clientY / window.innerHeight)\n    }\n\n    window.addEventListener(\"mousemove\", handleMouseMove)\n\n    return () => {\n      window.removeEventListener(\"mousemove\", handleMouseMove)\n    }\n  }, [shouldReduceMotion, isInView, mouseX, mouseY])\n\n  return (\n    <motion.svg\n      ref={ref}\n      className=\"h-auto w-full touch-manipulation [--pattern:color-mix(in_oklab,var(--foreground)_12%,var(--background))] [--stroke:color-mix(in_oklab,var(--foreground)_16%,var(--background))]\"\n      viewBox=\"0 0 556 354\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden\n      initial=\"normal\"\n      whileTap=\"pressed\"\n      onTap={() => play()}\n    >\n      <defs>\n        <pattern\n          id={ids.facePattern}\n          x=\"0\"\n          y=\"0\"\n          width=\"10\"\n          height=\"10\"\n          patternUnits=\"userSpaceOnUse\"\n        >\n          <path\n            d=\"M-1 1l2 -2M0 10l10 -10M9 11l2 -2\"\n            stroke=\"var(--pattern)\"\n            strokeWidth=\"1\"\n          />\n        </pattern>\n\n        <motion.g\n          id={ids.faceFill}\n          variants={{\n            normal: {\n              transform: \"translate(0px, 0px)\",\n            },\n            pressed: {\n              transform: \"translate(0px, 16px)\",\n            },\n          }}\n          transition={transition}\n        >\n          <path d=\"M333.05 256.58L222.20 320.58L166.78 288.58L277.63 224.58L333.05 256.58Z\" />\n          <path d=\"M388.48 32.58L277.63 96.58L388.48 160.58L499.33 96.58L554.76 128.58L388.48 224.58L166.78 96.58L333.05 0.58L388.48 32.58Z\" />\n          <path d=\"M166.78 288.58L111.35 320.58L0.50 256.58L55.93 224.58L166.78 288.58Z\" />\n          <path d=\"M554.76 64.58L499.33 96.58L388.48 32.58L443.90 0.58L554.76 64.58Z\" />\n          <path d=\"M166.78 160.58L55.93 224.58L0.50 192.58L111.35 128.58L166.78 160.58Z\" />\n        </motion.g>\n\n        <motion.path\n          id={ids.stroke}\n          variants={{\n            normal: {\n              d: [\n                // C\n                \"M28.21 240.58 L0.50 224.58 V192.58 L111.35 128.58 L166.78 160.58 V192.58 L83.64 240.58\",\n                \"M166.78 160.58 L0.50 256.58 V288.58 L111.35 352.58 L166.78 320.58 L222.20 352.58 L333.05 288.58 V256.58 L277.63 224.58 L166.78 288.58 L0.50 192.58\",\n                \"M0.50 256.58 L111.35 320.58 L166.78 288.58 L222.20 320.58 L333.05 256.58\",\n                \"M111.35 320.58 V352.58\",\n                \"M166.78 288.58 V320.58\",\n                \"M222.20 320.58 V352.58\",\n                // D\n                \"M499.33 96.58 L554.76 128.58 V160.58 L388.48 256.58 L166.78 128.58 V96.58 L333.05 0.58 L499.33 96.58\",\n                \"M166.78 96.58 L388.48 224.58 L554.76 128.58\",\n                \"M527.04 112.58 L554.76 96.58 V64.58 L443.90 0.58 L277.63 96.58 L388.48 160.58 L554.76 64.58\",\n                \"M305.34 112.58 L388.48 64.58 L471.62 112.58\",\n                \"M388.48 224.58 V256.58\",\n                \"M388.48 32.58 V64.58\",\n              ].join(\"\"),\n            },\n            pressed: {\n              d: [\n                // C\n                \"M42.07 248.58 L0.50 224.58 V208.58 L111.35 144.58 L166.78 176.58 V192.58 L69.78 248.58\",\n                \"M166.78 176.58 L0.5 272.58 V288.58 L111.35 352.58 L166.78 320.58 L222.20 352.58 L333.05 288.58 V272.58 L277.63 240.58 L166.78 304.58 L0.5 208.58\",\n                \"M0.5 272.58 L111.35 336.58 L166.78 304.58 L222.20 336.58 L333.05 272.58\",\n                \"M111.35 336.58 V352.58\",\n                \"M166.78 304.58 V320.58\",\n                \"M222.20 336.58 V352.58\",\n                // D\n                \"M499.33 112.58 L554.76 144.58 V160.58 L388.48 256.58 L166.78 128.58 V112.58 L333.05 16.58 L499.33 112.58\",\n                \"M166.78 112.58 L388.48 240.58 L554.76 144.58\",\n                \"M513.19 120.58 L554.76 96.58 V80.58 L443.90 16.58 L277.63 112.58 L388.48 176.58 L554.76 80.58\",\n                \"M291.48 120.58 L388.48 64.58 L485.47 120.58\",\n                \"M388.48 240.58 V256.58\",\n                \"M388.48 48.58 V64.58\",\n              ].join(\"\"),\n            },\n          }}\n          transition={transition}\n        />\n\n        <motion.radialGradient\n          id={ids.radialGradient}\n          cx={cx}\n          cy={cy}\n          r=\"200\"\n          gradientUnits=\"userSpaceOnUse\"\n        >\n          <stop\n            className=\"dark:[stop-color:#fff]\"\n            stopColor=\"var(--color-zinc-700)\"\n          />\n          <stop\n            className=\"dark:[stop-color:var(--color-zinc-600)]\"\n            offset=\"1\"\n            stopColor=\"var(--color-zinc-400)\"\n            stopOpacity=\"0\"\n          />\n        </motion.radialGradient>\n      </defs>\n\n      <g className=\"fill-background\" fillRule=\"evenodd\" clipRule=\"evenodd\">\n        <motion.path\n          variants={{\n            normal: {\n              d: \"M166.78 160.58L55.93 224.58L0.50 192.58V224.58L55.93 256.58L166.78 192.58V160.58Z\",\n            },\n            pressed: {\n              d: \"M166.78 176.58L55.93 240.58L0.50 208.58V224.58L55.93 256.58L166.78 192.58V176.58Z\",\n            },\n          }}\n          transition={transition}\n        />\n        <motion.path\n          variants={{\n            normal: {\n              d: \"M166.78 288.58L111.35 320.58L0.50 256.58V288.58L111.35 352.58L166.78 320.58L222.20 352.58L333.05 288.58V256.58L222.20 320.58L166.78 288.58Z\",\n            },\n            pressed: {\n              d: \"M166.78 304.58L111.35 336.58L0.50 272.58V288.58L111.35 352.58L166.78 320.58L222.20 352.58L333.05 288.58V272.58L222.20 336.58L166.78 304.58Z\",\n            },\n          }}\n          transition={transition}\n        />\n        <motion.path\n          variants={{\n            normal: {\n              d: \"M388.48 224.58L166.78 96.58V128.58L388.48 256.58L554.76 160.58V128.58L388.48 224.58Z\",\n            },\n            pressed: {\n              d: \"M388.48 240.58L166.78 112.58V128.58L388.48 256.58L554.76 160.58V144.58L388.48 240.58Z\",\n            },\n          }}\n          transition={transition}\n        />\n        <motion.path\n          variants={{\n            normal: {\n              d: \"M388.48 32.58L277.63 96.58V128.58L388.48 64.58L499.33 128.58L554.75 96.58V64.58L499.33 96.58L388.48 32.58Z\",\n            },\n            pressed: {\n              d: \"M388.48 48.58L277.63 112.58V128.58L388.48 64.58L499.33 128.58L554.75 96.58V80.58L499.33 112.58L388.48 48.58Z\",\n            },\n          }}\n          transition={transition}\n        />\n      </g>\n\n      <use href={`#${ids.faceFill}`} className=\"fill-background\" />\n      <use href={`#${ids.faceFill}`} fill={`url(#${ids.facePattern})`} />\n\n      <use href={`#${ids.stroke}`} stroke=\"var(--stroke)\" />\n      <use href={`#${ids.stroke}`} stroke={`url(#${ids.radialGradient})`} />\n    </motion.svg>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/spotlight-logo.tsx"
    }
  ],
  "docs": "https://chanhdai.com/components/spotlight-logo",
  "categories": [
    "effects"
  ],
  "type": "registry:component"
}