{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "moving-gradient-text",
  "title": "Moving Gradient Text",
  "description": "Text with a continuously flowing gradient animation.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/wise-ui/components/moving-gradient-text.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useMotionValue, useTransform, animate } from \"motion/react\"\nimport { cn } from \"@/registry/wise-ui/lib/utils\"\n\ninterface MovingGradientTextProps {\n  gradientFrom?: string\n  gradientTo?: string\n  speed?: number\n  className?: string\n  style?: React.CSSProperties\n  children: React.ReactNode\n}\n\nconst MovingGradientText = React.forwardRef<\n  HTMLSpanElement,\n  MovingGradientTextProps\n>(\n  (\n    {\n      gradientFrom = \"#00a896\",\n      gradientTo = \"#c084fc\",\n      speed = 1,\n      children,\n      className,\n      style,\n    },\n    ref\n  ) => {\n    const rotation = useMotionValue(0)\n    const controlRef = React.useRef<ReturnType<typeof animate> | null>(null)\n\n    React.useEffect(() => {\n      controlRef.current = animate(\n        rotation,\n        rotation.get() + 360 * 10000,\n        { duration: (3 / speed) * 10000, ease: \"linear\" }\n      )\n      return () => {\n        controlRef.current?.stop()\n      }\n    }, [speed, rotation])\n\n    const backgroundPosition = useTransform(\n      rotation,\n      (v) => `${-(v * 100) / 360}% 0%`\n    )\n\n    return (\n      <motion.span\n        ref={ref}\n        className={cn(\"inline-block\", className)}\n        style={{\n          backgroundImage: `linear-gradient(90deg, ${gradientFrom}, ${gradientTo}, ${gradientFrom})`,\n          backgroundSize: \"200% 100%\",\n          backgroundRepeat: \"repeat\",\n          backgroundPosition,\n          WebkitBackgroundClip: \"text\",\n          WebkitTextFillColor: \"transparent\",\n          backgroundClip: \"text\",\n          ...style,\n        }}\n      >\n        {children}\n      </motion.span>\n    )\n  }\n)\nMovingGradientText.displayName = \"MovingGradientText\"\n\nexport { MovingGradientText }\nexport type { MovingGradientTextProps }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}