{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer-text",
  "title": "Shimmer Text",
  "description": "A premium text component with an elegant shimmer animation effect.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spark-ui/shimmer-text.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useInView } from \"framer-motion\";\nimport React, { useRef } from \"react\";\n\ntype ShimmerDirection = \"ltr\" | \"rtl\";\ntype ShimmerVariant =\n  | \"default\"\n  | \"blue\"\n  | \"purple\"\n  | \"green\"\n  | \"red\"\n  | \"amber\"\n  | \"gold\"\n  | \"silver\"\n  | \"rose\"\n  | \"cyan\"\n  | \"indigo\"\n  | \"lime\"\n  | \"orange\"\n  | \"pink\"\n  | \"teal\"\n  | \"violet\";\n\ninterface ShimmerTextProps {\n  /** The text content to display */\n  children: React.ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Primary shimmer color (overrides variant) */\n  shimmerColor?: string;\n  /** Secondary shimmer color for gradient effect */\n  shimmerColor2?: string;\n  /** Direction of shimmer animation */\n  direction?: ShimmerDirection;\n  /** Duration of one shimmer cycle in seconds */\n  duration?: number;\n  /** Width of the shimmer band (0.1 - 1) */\n  shimmerWidth?: number;\n  /** Preset color variant */\n  variant?: ShimmerVariant;\n}\n\nconst variantColors: Record<ShimmerVariant, [string, string]> = {\n  default: [\"#60a5fa\", \"#3b82f6\"],\n  blue: [\"#60a5fa\", \"#3b82f6\"],\n  purple: [\"#a855f7\", \"#7c3aed\"],\n  green: [\"#22c55e\", \"#16a34a\"],\n  red: [\"#ef4444\", \"#dc2626\"],\n  amber: [\"#f59e0b\", \"#d97706\"],\n  gold: [\"#fbbf24\", \"#f59e0b\"],\n  silver: [\"#e4e4e7\", \"#a1a1aa\"],\n  rose: [\"#f43f5e\", \"#e11d48\"],\n  cyan: [\"#06b6d4\", \"#0891b2\"],\n  indigo: [\"#6366f1\", \"#4f46e5\"],\n  lime: [\"#84cc16\", \"#65a30d\"],\n  orange: [\"#f97316\", \"#ea580c\"],\n  pink: [\"#ec4899\", \"#db2777\"],\n  teal: [\"#14b8a6\", \"#0d9488\"],\n  violet: [\"#8b5cf6\", \"#7c3aed\"],\n};\n\n/**\n * ShimmerText - A premium text component with shimmer effect flowing within the text itself.\n * Uses background-clip: text to ensure the shimmer stays inside the text characters.\n * Animation starts when the component comes into view and loops infinitely.\n */\nexport const ShimmerText = ({\n  children,\n  className,\n  shimmerColor,\n  shimmerColor2,\n  direction = \"rtl\",\n  duration = 2,\n  shimmerWidth = 0.5,\n  variant = \"default\",\n}: ShimmerTextProps) => {\n  const ref = useRef(null);\n  const isInView = useInView(ref, { once: false, margin: \"-50px\" });\n\n  // Get colors from variant or custom props\n  const [primary, secondary] = variantColors[variant];\n  const color1 = shimmerColor || primary;\n  const color2 = shimmerColor2 || secondary;\n\n  const backgroundSize = shimmerWidth * 300;\n  const startPos =\n    direction === \"ltr\" ? `-${backgroundSize}%` : `${backgroundSize}%`;\n  const endPos =\n    direction === \"ltr\" ? `${backgroundSize}%` : `-${backgroundSize}%`;\n\n  return (\n    <motion.span\n      ref={ref}\n      className={cn(\n        \"inline-block bg-clip-text text-transparent font-bold\",\n        className,\n      )}\n      style={{\n        backgroundImage: `linear-gradient(90deg, #52525b 0%, ${color1} 40%, ${color2} 50%, ${color1} 60%, #52525b 100%)`,\n        backgroundSize: `${backgroundSize}% 100%`,\n      }}\n      animate={isInView ? { backgroundPosition: [startPos, endPos] } : {}}\n      transition={{\n        duration,\n        repeat: Infinity,\n        repeatType: \"loop\",\n        ease: \"linear\",\n      }}\n    >\n      {children}\n    </motion.span>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}