{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-gradient-text",
  "type": "registry:ui",
  "title": "Animated Gradient Text",
  "description": "An animated gradient background which transitions between colors for text.",
  "files": [
    {
      "path": "registry/magicui/animated-gradient-text.tsx",
      "content": "import { type ComponentPropsWithoutRef } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface AnimatedGradientTextProps extends ComponentPropsWithoutRef<\"div\"> {\n  speed?: number\n  colorFrom?: string\n  colorTo?: string\n}\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          \"--color-from\": colorFrom,\n          \"--color-to\": colorTo,\n        } as React.CSSProperties\n      }\n      className={cn(\n        `animate-gradient inline bg-linear-to-r from-(--color-from) via-(--color-to) to-(--color-from) bg-size-[var(--bg-size)_100%] bg-clip-text text-transparent`,\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-gradient": "gradient 8s linear infinite"
    }
  },
  "css": {
    "@keyframes gradient": {
      "to": {
        "background-position": "var(--bg-size, 300%) 0"
      }
    }
  }
}