{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-gradient-text-demo",
  "type": "registry:example",
  "title": "Animated Gradient Text Demo",
  "description": "Example showing text with animated gradient backgrounds.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@magicui/animated-gradient-text"
  ],
  "files": [
    {
      "path": "registry/example/animated-gradient-text-demo.tsx",
      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { AnimatedGradientText } from \"@/registry/magicui/animated-gradient-text\"\n\nexport default function AnimatedGradientTextDemo() {\n  return (\n    <div className=\"group relative mx-auto flex items-center justify-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f]\">\n      <span\n        className={cn(\n          \"animate-gradient absolute inset-0 block h-full w-full rounded-[inherit] bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:300%_100%] p-[1px]\"\n        )}\n        style={{\n          WebkitMask:\n            \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n          WebkitMaskComposite: \"destination-out\",\n          mask: \"linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)\",\n          maskComposite: \"subtract\",\n          WebkitClipPath: \"padding-box\",\n        }}\n      />\n      🎉 <hr className=\"mx-2 h-4 w-px shrink-0 bg-neutral-500\" />\n      <AnimatedGradientText className=\"text-sm font-medium\">\n        Introducing Magic UI\n      </AnimatedGradientText>\n      <ChevronRight className=\"ml-1 size-4 stroke-neutral-500 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5\" />\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}