{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-gradient-text",
  "title": "Animated Gradient Text",
  "description": "An animated gradient background which transitions between colors for text.",
  "files": [
    {
      "path": "registry/tealmac/animated-gradient-text.tsx",
      "content": "import { type ComponentPropsWithoutRef, type CSSProperties } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedGradientTextProps extends ComponentPropsWithoutRef<\"span\"> {\n  /** Relative speed of the gradient motion. */\n  speed?: number\n  colorFrom?: string\n  colorTo?: string\n}\n\n/**\n * AnimatedGradientText fills its text with a horizontally-scrolling two-stop\n * gradient. The gradient is an inline background-image that is clipped to the\n * glyphs and panned via the shared `animate-gradient` keyframes.\n */\nexport function AnimatedGradientText({\n  children,\n  className,\n  speed = 1,\n  colorFrom = \"#ffaa40\",\n  colorTo = \"#9c40ff\",\n  ...props\n}: AnimatedGradientTextProps) {\n  return (\n    <span\n      style={\n        {\n          \"--bg-size\": `${speed * 300}%`,\n          backgroundImage: `linear-gradient(90deg, ${colorFrom}, ${colorTo}, ${colorFrom})`,\n          backgroundSize: \"var(--bg-size) 100%\",\n          WebkitBackgroundClip: \"text\",\n          backgroundClip: \"text\",\n          color: \"transparent\",\n        } as CSSProperties\n      }\n      className={cn(\n        \"animate-gradient inline motion-reduce:animate-none\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport default AnimatedGradientText\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-gradient": "gradient 8s linear infinite"
    }
  },
  "css": {
    "@keyframes gradient": {
      "to": {
        "background-position": "var(--bg-size, 300%) 0"
      }
    }
  },
  "type": "registry:ui"
}