{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-hover",
  "type": "registry:block",
  "title": "Text hover",
  "description": "Text hover",
  "files": [
    {
      "path": "components/usages/texthoverusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { TextHoverEffect } from \"@/registry/open-source/text-hover\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<TextHoverEffect text={\"Components\"} />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/texthoverusage.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { TextHoverEffect } from \"@/registry/open-source/text-hover\";\n\nexport default function Usage() {\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<TextHoverEffect text={\"Components\"} />\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/text-hover.tsx",
      "content": "\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { motion } from \"motion/react\";\n\nexport const TextHoverEffect = ({\n\ttext,\n\tduration,\n}: {\n\ttext: string;\n\tduration?: number;\n\tautomatic?: boolean;\n}) => {\n\tconst svgRef = useRef<SVGSVGElement>(null);\n\tconst [cursor, setCursor] = useState({ x: 0, y: 0 });\n\tconst [hovered, setHovered] = useState(false);\n\tconst [maskPosition, setMaskPosition] = useState({ cx: \"50%\", cy: \"50%\" });\n\n\tuseEffect(() => {\n\t\tif (svgRef.current && cursor.x !== null && cursor.y !== null) {\n\t\t\tconst svgRect = svgRef.current.getBoundingClientRect();\n\t\t\tconst cxPercentage = ((cursor.x - svgRect.left) / svgRect.width) * 100;\n\t\t\tconst cyPercentage = ((cursor.y - svgRect.top) / svgRect.height) * 100;\n\t\t\tsetMaskPosition({\n\t\t\t\tcx: `${cxPercentage}%`,\n\t\t\t\tcy: `${cyPercentage}%`,\n\t\t\t});\n\t\t}\n\t}, [cursor]);\n\n\treturn (\n\t\t<section className=\"group relative h-full\">\n\t\t\t<span className=\"absolute inset-0 transition-all justify-self-center content-center opacity-100 group-hover:opacity-0 pointer-events-none\">\n\t\t\t\tHover here to see the effect\n\t\t\t</span>\n\t\t\t<svg\n\t\t\t\tref={svgRef}\n\t\t\t\twidth=\"100%\"\n\t\t\t\theight=\"100%\"\n\t\t\t\tviewBox=\"0 0 300 100\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseMove={(e) => setCursor({ x: e.clientX, y: e.clientY })}\n\t\t\t\tclassName=\"select-none z-0\"\n\t\t\t>\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient\n\t\t\t\t\t\tid=\"textGradient\"\n\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\t\tr=\"25%\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{hovered && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<stop offset=\"0%\" stopColor={\"var(--yellow-500)\"} />\n\t\t\t\t\t\t\t\t<stop offset=\"25%\" stopColor={\"var(--red-500)\"} />\n\t\t\t\t\t\t\t\t<stop offset=\"50%\" stopColor={\"var(--blue-500)\"} />\n\t\t\t\t\t\t\t\t<stop offset=\"75%\" stopColor={\"var(--cyan-500)\"} />\n\t\t\t\t\t\t\t\t<stop offset=\"100%\" stopColor={\"var(--violet-500)\"} />\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</linearGradient>\n\n\t\t\t\t\t<motion.radialGradient\n\t\t\t\t\t\tid=\"revealMask\"\n\t\t\t\t\t\tgradientUnits=\"userSpaceOnUse\"\n\t\t\t\t\t\tr=\"20%\"\n\t\t\t\t\t\tanimate={maskPosition}\n\t\t\t\t\t\ttransition={{ duration: duration ?? 0, ease: \"easeOut\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<stop offset=\"0%\" stopColor=\"white\" />\n\t\t\t\t\t\t<stop offset=\"100%\" stopColor=\"black\" />\n\t\t\t\t\t</motion.radialGradient>\n\t\t\t\t\t<mask id=\"textMask\">\n\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\tx=\"0\"\n\t\t\t\t\t\t\ty=\"0\"\n\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\tfill=\"url(#revealMask)\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</mask>\n\t\t\t\t</defs>\n\t\t\t\t<text\n\t\t\t\t\tx=\"50%\"\n\t\t\t\t\ty=\"50%\"\n\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\tdominantBaseline=\"middle\"\n\t\t\t\t\tstroke=\"url(#textGradient)\"\n\t\t\t\t\tstrokeWidth=\"0.3\"\n\t\t\t\t\tmask=\"url(#textMask)\"\n\t\t\t\t\tclassName=\"font-[helvetica] font-bold fill-transparent text-4xl pointer-events-none\"\n\t\t\t\t>\n\t\t\t\t\t{text}\n\t\t\t\t</text>\n\t\t\t</svg>\n\t\t</section>\n\t);\n};\n",
      "type": "registry:ui"
    }
  ]
}