{
  "name": "hero-highlight",
  "type": "registry:ui",
  "dependencies": [
    "mini-svg-data-uri",
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/hero-highlight.tsx",
      "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { useMotionValue, motion, useMotionTemplate } from \"motion/react\";\nimport React from \"react\";\n\nexport const HeroHighlight = ({\n  children,\n  className,\n  containerClassName,\n}: {\n  children: React.ReactNode;\n  className?: string;\n  containerClassName?: string;\n}) => {\n  let mouseX = useMotionValue(0);\n  let mouseY = useMotionValue(0);\n\n  // SVG patterns for different states and themes\n  const dotPatterns = {\n    light: {\n      default: `url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%23d4d4d4' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E\")`,\n      hover: `url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%236366f1' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E\")`,\n    },\n    dark: {\n      default: `url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%23404040' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E\")`,\n      hover: `url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='none'%3E%3Ccircle fill='%238183f4' id='pattern-circle' cx='10' cy='10' r='2.5'%3E%3C/circle%3E%3C/svg%3E\")`,\n    },\n  };\n\n  function handleMouseMove({\n    currentTarget,\n    clientX,\n    clientY,\n  }: React.MouseEvent<HTMLDivElement>) {\n    if (!currentTarget) return;\n    let { left, top } = currentTarget.getBoundingClientRect();\n\n    mouseX.set(clientX - left);\n    mouseY.set(clientY - top);\n  }\n  return (\n    <div\n      className={cn(\n        \"group relative flex h-[40rem] w-full items-center justify-center bg-white dark:bg-black\",\n        containerClassName,\n      )}\n      onMouseMove={handleMouseMove}\n    >\n      <div\n        className=\"pointer-events-none absolute inset-0 dark:hidden\"\n        style={{\n          backgroundImage: dotPatterns.light.default,\n        }}\n      />\n      <div\n        className=\"pointer-events-none absolute inset-0 hidden dark:block\"\n        style={{\n          backgroundImage: dotPatterns.dark.default,\n        }}\n      />\n      <motion.div\n        className=\"pointer-events-none absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100 dark:hidden\"\n        style={{\n          backgroundImage: dotPatterns.light.hover,\n          WebkitMaskImage: useMotionTemplate`\n            radial-gradient(\n              200px circle at ${mouseX}px ${mouseY}px,\n              black 0%,\n              transparent 100%\n            )\n          `,\n          maskImage: useMotionTemplate`\n            radial-gradient(\n              200px circle at ${mouseX}px ${mouseY}px,\n              black 0%,\n              transparent 100%\n            )\n          `,\n        }}\n      />\n      <motion.div\n        className=\"pointer-events-none absolute inset-0 hidden opacity-0 transition duration-300 group-hover:opacity-100 dark:block\"\n        style={{\n          backgroundImage: dotPatterns.dark.hover,\n          WebkitMaskImage: useMotionTemplate`\n            radial-gradient(\n              200px circle at ${mouseX}px ${mouseY}px,\n              black 0%,\n              transparent 100%\n            )\n          `,\n          maskImage: useMotionTemplate`\n            radial-gradient(\n              200px circle at ${mouseX}px ${mouseY}px,\n              black 0%,\n              transparent 100%\n            )\n          `,\n        }}\n      />\n\n      <div className={cn(\"relative z-20\", className)}>{children}</div>\n    </div>\n  );\n};\n\nexport const Highlight = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) => {\n  return (\n    <motion.span\n      initial={{\n        backgroundSize: \"0% 100%\",\n      }}\n      animate={{\n        backgroundSize: \"100% 100%\",\n      }}\n      transition={{\n        duration: 2,\n        ease: \"linear\",\n        delay: 0.5,\n      }}\n      style={{\n        backgroundRepeat: \"no-repeat\",\n        backgroundPosition: \"left center\",\n        display: \"inline\",\n      }}\n      className={cn(\n        `relative inline-block rounded-lg bg-gradient-to-r from-indigo-300 to-purple-300 px-1 pb-1 dark:from-indigo-500 dark:to-purple-500`,\n        className,\n      )}\n    >\n      {children}\n    </motion.span>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/ui/hero-highlight.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Hero Highlight"
}