{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-text",
  "type": "registry:ui",
  "title": "Gradient Text",
  "description": "A Gradient Text component for displaying a gradient text.",
  "files": [
    {
      "path": "src/registry/ui/gradient-text.tsx",
      "type": "registry:ui",
      "content": "import { cn } from \"@/lib/utils\";\n\nconst ELEMENTS = {\n  span: \"span\",\n  p: \"p\",\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n} as const;\n\n// Must match the keyframe name used in the animate-[...] class below.\nconst KEYFRAMES = \"gradient-text-shift\";\nconst DEFAULT_COLORS = [\"var(--primary)\", \"var(--muted-foreground)\"];\n\nexport type GradientTextProps = React.HTMLAttributes<HTMLElement> & {\n  /** Element to render. @default \"span\" */\n  as?: keyof typeof ELEMENTS;\n  /** CSS colors for the gradient, in order. Defaults to theme tokens. */\n  colors?: string[];\n  /** Slowly shift the gradient across the text. @default true */\n  animate?: boolean;\n  /** Seconds per full gradient cycle. @default 6 */\n  speed?: number;\n};\n\n/** Text filled with a (optionally drifting) gradient. Pure CSS, no client JS. */\nexport function GradientText({\n  as = \"span\",\n  colors = DEFAULT_COLORS,\n  animate = true,\n  speed = 6,\n  className,\n  style,\n  children,\n  ...props\n}: GradientTextProps) {\n  const Comp = ELEMENTS[as];\n  // When animating, repeat the colors so the 200%-wide image tiles seamlessly at a one-width offset.\n  const stops = animate ? [...colors, ...colors, colors[0]] : colors;\n\n  return (\n    <>\n      {animate && (\n        <style href={KEYFRAMES} precedence=\"default\">\n          {`@keyframes ${KEYFRAMES}{from{background-position:0% 50%}to{background-position:100% 50%}}`}\n        </style>\n      )}\n      <Comp\n        data-slot=\"gradient-text\"\n        className={cn(\n          \"bg-clip-text text-transparent [-webkit-box-decoration-break:clone] [box-decoration-break:clone]\",\n          animate &&\n            \"animate-[gradient-text-shift_var(--gradient-text-speed)_linear_infinite] motion-reduce:animate-none\",\n          className\n        )}\n        style={{\n          backgroundImage: `linear-gradient(to right, ${stops.join(\", \")})`,\n          backgroundSize: animate ? \"200% 100%\" : undefined,\n          ...(animate && { \"--gradient-text-speed\": `${speed}s` }),\n          ...style,\n        } as React.CSSProperties}\n        {...props}\n      >\n        {children}\n      </Comp>\n    </>\n  );\n}\n\nexport default GradientText;\n"
    }
  ]
}