{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-text",
  "type": "registry:component",
  "title": "Gradient text",
  "description": "Headline text filled with a slowly drifting gradient built from your accent tokens. A real text node for SEO and screen readers, still for reduced motion.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/gradient-text.tsx",
      "type": "registry:ui",
      "target": "components/ui/gradient-text.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Headline text filled with a slowly drifting gradient built from the accent\n * tokens, so it follows your theme. Stays a real text node for SEO and\n * screen readers, and holds still for reduced motion.\n */\ntype GradientTextProps = {\n  children?: React.ReactNode\n  as?: \"span\" | \"h1\" | \"h2\" | \"h3\" | \"p\"\n  /** Seconds per cycle. */\n  duration?: number\n  /** Extra colour stops; defaults to accent, accent-2 and back. */\n  colors?: string[]\n  className?: string\n}\n\nfunction GradientText({ children = \"Ship the whole product\", as: Tag = \"span\", duration = 8, colors, className }: GradientTextProps) {\n  const reduce = useReducedMotion()\n  const stops = colors ?? [\"var(--accent)\", \"var(--accent-2)\", \"color-mix(in oklch, var(--accent) 60%, var(--fg))\", \"var(--accent)\"]\n  return (\n    <Tag\n      data-slot=\"gradient-text\"\n      className={cn(\"inline-block bg-clip-text font-semibold tracking-[-0.04em] text-transparent\", !children || typeof children === \"string\" ? \"text-4xl sm:text-5xl\" : \"\", className)}\n      style={{\n        backgroundImage: `linear-gradient(100deg, ${stops.join(\", \")})`,\n        backgroundSize: \"300% 100%\",\n        WebkitBackgroundClip: \"text\",\n        animation: reduce ? undefined : `gradient-text-drift ${duration}s ease-in-out infinite alternate`,\n      }}\n    >\n      {children}\n      <style>{`@keyframes gradient-text-drift{from{background-position:0% 50%}to{background-position:100% 50%}}`}</style>\n    </Tag>\n  )\n}\n\nexport { GradientText }\nexport type { GradientTextProps }\n"
    }
  ]
}