{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fluid-gradient-text",
  "title": "Fluid Gradient Text",
  "author": "ncdai <dai@chanhdai.com>",
  "description": "Render text with a fluid gradient that shifts with pointer movement.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/components/fluid-gradient-text/fluid-gradient-text.tsx",
      "content": "\"use client\"\n\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\"\n\nexport type FluidGradientTextProps = {\n  /** Text content rendered inside the SVG. */\n  text: string\n  /**\n   * SVG viewBox width used to scale the gradient and text layout.\n   * @default 1200\n   * */\n  svgViewBoxWidth?: number\n  /**\n   * SVG viewBox height used as the base text size.\n   * @default 300\n   * */\n  svgViewBoxHeight?: number\n}\n\nexport function FluidGradientText({\n  text,\n  svgViewBoxWidth = 1200,\n  svgViewBoxHeight = 300,\n}: FluidGradientTextProps) {\n  const gradientX1Raw = useMotionValue(0.5)\n  const gradientX1 = useSpring(\n    useTransform(gradientX1Raw, [0, 1], [0, svgViewBoxWidth]),\n    {\n      stiffness: 150,\n      damping: 25,\n    }\n  )\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const containerRect = event.currentTarget.getBoundingClientRect()\n    gradientX1Raw.set(\n      (event.clientX - containerRect.left) / containerRect.width\n    )\n  }\n\n  const handleMouseLeave = () => {\n    gradientX1Raw.set(0.5)\n  }\n\n  return (\n    <div\n      className=\"relative size-full overflow-hidden after:absolute after:bottom-0 after:h-px after:w-full after:bg-current/15\"\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n    >\n      <svg\n        className=\"size-full translate-y-[37.5%] select-none\"\n        viewBox={`0 0 ${svgViewBoxWidth} ${svgViewBoxHeight}`}\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <text\n          x=\"50%\"\n          y=\"50%\"\n          textAnchor=\"middle\"\n          dominantBaseline=\"central\"\n          stroke=\"currentColor\"\n          strokeOpacity=\"0.1\"\n          strokeWidth=\"2\"\n          fill=\"url(#fluid_gradient_text_linear)\"\n          style={{\n            fontFamily: \"Helvetica\",\n            fontSize: svgViewBoxHeight,\n            fontWeight: \"bold\",\n          }}\n        >\n          {text}\n        </text>\n        <defs>\n          <motion.linearGradient\n            id=\"fluid_gradient_text_linear\"\n            x1={gradientX1}\n            y1=\"0\"\n            x2={svgViewBoxWidth / 2}\n            y2={svgViewBoxHeight}\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop offset=\"0.625\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n            <stop offset=\"1\" stopColor=\"currentColor\" />\n          </motion.linearGradient>\n        </defs>\n      </svg>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/fluid-gradient-text.tsx"
    }
  ],
  "docs": "https://chanhdai.com/components/fluid-gradient-text",
  "categories": [
    "text-effects"
  ],
  "type": "registry:component"
}