{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmering-text",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/ui/shimmering-text.tsx",
      "content": "\"use client\"\n\nimport React, { useMemo, useRef } from \"react\"\nimport { motion, useInView, UseInViewOptions } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface ShimmeringTextProps {\n  /** Text to display with shimmer effect */\n  text: string\n  /** Animation duration in seconds */\n  duration?: number\n  /** Delay before starting animation */\n  delay?: number\n  /** Whether to repeat the animation */\n  repeat?: boolean\n  /** Pause duration between repeats in seconds */\n  repeatDelay?: number\n  /** Custom className */\n  className?: string\n  /** Whether to start animation when component enters viewport */\n  startOnView?: boolean\n  /** Whether to animate only once */\n  once?: boolean\n  /** Margin for in-view detection (rootMargin) */\n  inViewMargin?: UseInViewOptions[\"margin\"]\n  /** Shimmer spread multiplier */\n  spread?: number\n  /** Base text color */\n  color?: string\n  /** Shimmer gradient color */\n  shimmerColor?: string\n}\n\nexport function ShimmeringText({\n  text,\n  duration = 2,\n  delay = 0,\n  repeat = true,\n  repeatDelay = 0.5,\n  className,\n  startOnView = true,\n  once = false,\n  inViewMargin,\n  spread = 2,\n  color,\n  shimmerColor,\n}: ShimmeringTextProps) {\n  const ref = useRef<HTMLSpanElement>(null)\n  const isInView = useInView(ref, { once, margin: inViewMargin })\n\n  // Calculate dynamic spread based on text length\n  const dynamicSpread = useMemo(() => {\n    return text.length * spread\n  }, [text, spread])\n\n  // Determine if we should start animation\n  const shouldAnimate = !startOnView || isInView\n\n  return (\n    <motion.span\n      ref={ref}\n      className={cn(\n        \"relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent\",\n        \"[--base-color:var(--muted-foreground)] [--shimmer-color:var(--foreground)]\",\n        \"[background-repeat:no-repeat,padding-box]\",\n        \"[--shimmer-bg:linear-gradient(90deg,transparent_calc(50%-var(--spread)),var(--shimmer-color),transparent_calc(50%+var(--spread)))]\",\n        \"dark:[--base-color:var(--muted-foreground)] dark:[--shimmer-color:var(--foreground)]\",\n        className\n      )}\n      style={\n        {\n          \"--spread\": `${dynamicSpread}px`,\n          ...(color && { \"--base-color\": color }),\n          ...(shimmerColor && { \"--shimmer-color\": shimmerColor }),\n          backgroundImage: `var(--shimmer-bg), linear-gradient(var(--base-color), var(--base-color))`,\n        } as React.CSSProperties\n      }\n      initial={{\n        backgroundPosition: \"100% center\",\n        opacity: 0,\n      }}\n      animate={\n        shouldAnimate\n          ? {\n              backgroundPosition: \"0% center\",\n              opacity: 1,\n            }\n          : {}\n      }\n      transition={{\n        backgroundPosition: {\n          repeat: repeat ? Infinity : 0,\n          duration,\n          delay,\n          repeatDelay,\n          ease: \"linear\",\n        },\n        opacity: {\n          duration: 0.3,\n          delay,\n        },\n      }}\n    >\n      {text}\n    </motion.span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}