{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-text",
  "type": "registry:ui",
  "title": "Gradient Text",
  "description": "Animated linear-gradient text fill via background-clip — for headlines and brand accents.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/gradient-text.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Animated gradient text component.\n * @author Saasflare™\n * Applies an animated linear gradient to text via background-clip.\n * Supports static and animated modes with configurable colors and speed.\n * @module packages/ui/components/ui/gradient-text\n * @package ui\n *\n * @component\n * @example\n * import { GradientText } from '@saasflare/ui';\n * <h1>\n *   Build with <GradientText>Saasflare</GradientText>\n * </h1>\n *\n * @example\n * // Custom gradient and animation\n * <GradientText\n *   colors={[\"var(--chart-1)\", \"var(--chart-3)\", \"var(--chart-5)\"]}\n *   speed={4}\n * >\n *   Premium Feature\n * </GradientText>\n */\n\nimport { type ReactNode } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport { useReducedMotion } from \"@saasflare/ui\"\n\n/** Props for the GradientText component. */\nexport interface GradientTextProps\n  extends Omit<React.ComponentProps<\"span\">, keyof SaasflareComponentProps | \"color\">,\n    SaasflareComponentProps {\n  /** Text content to apply the gradient to. */\n  children: ReactNode\n  /** Gradient color stops. Default: `--primary` → `--chart-1` → `--chart-2` design tokens (OKLCH). */\n  colors?: string[]\n  /**\n   * Per-instance toggle for the gradient-position animation. Default: `true`.\n   * Layered on top of the design-system `animated` axis — the gradient only\n   * shifts when both this and the resolved `animated` flag are enabled.\n   */\n  animate?: boolean\n  /** Animation cycle duration in seconds. Default: `6` */\n  speed?: number\n  /** Gradient direction in degrees. Default: `90` */\n  angle?: number\n  /** Additional class names. */\n  className?: string\n}\n\n/**\n * Text with a vibrant gradient fill, optionally animated.\n *\n * - Uses `background-clip: text` for the gradient effect\n * - Animates via CSS `@keyframes` (no JS frames); honors the `animated` axis\n * - Falls back to a static gradient when reduced motion is preferred\n * - Renders as an inline `<span>` to nest inside any heading or paragraph\n *\n * @component\n * @package ui\n */\nexport function GradientText({\n  children,\n  colors = [\n    \"var(--primary)\",\n    \"var(--chart-1)\",\n    \"var(--chart-2)\",\n  ],\n  animate = true,\n  speed = 6,\n  angle = 90,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  style,\n  ...props\n}: GradientTextProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  const reduced = useReducedMotion()\n  const shouldAnimate = animate && sf.animated && !reduced\n\n  const gradient = `linear-gradient(${angle}deg, ${colors.join(\", \")}, ${colors[0]})`\n\n  return (\n    <>\n      {shouldAnimate && (\n        <style>{`\n          @keyframes sf-gradient-shift {\n            0% { background-position: 0% 50%; }\n            50% { background-position: 100% 50%; }\n            100% { background-position: 0% 50%; }\n          }\n        `}</style>\n      )}\n      <span\n        {...props}\n        className={cn(\n          \"bg-clip-text text-transparent\",\n          className,\n        )}\n        style={{\n          backgroundImage: gradient,\n          backgroundSize: shouldAnimate ? \"200% 200%\" : \"100% 100%\",\n          ...(shouldAnimate && {\n            animation: `sf-gradient-shift ${speed}s ease infinite`,\n          }),\n          ...style,\n        }}\n        data-slot=\"gradient-text\"\n        data-surface={sf.surface}\n        data-radius={sf.radius}\n        data-animated={String(sf.animated)}\n      >\n        {children}\n      </span>\n    </>\n  )\n}\n",
      "target": "components/ui/gradient-text.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/gradient-text.json"
  }
}