{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-texts-text-shimmer",
  "title": "Text Shimmer",
  "description": "Sleek text shimmer effect.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/components/texts/text-shimmer/index.tsx",
      "content": "'use client';\n\nimport React, { useMemo, useRef } from 'react';\nimport { motion, useInView, UseInViewOptions } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface ShimmerTextProps {\n  text: string;\n  duration?: number;\n  delay?: number;\n  repeat?: boolean;\n  repeatDelay?: number;\n  className?: string;\n  startOnView?: boolean;\n  once?: boolean;\n  inViewMargin?: UseInViewOptions['margin'];\n  spread?: number;\n  color?: string;\n  shimmerColor?: string;\n}\n\nexport function ShimmerText({\n  text,\n  duration = 1,\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}: ShimmerTextProps) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const isInView = useInView(ref, { once, margin: inViewMargin });\n\n  const dynamicSpread = useMemo(() => text.length * spread, [text, spread]);\n\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={{ backgroundPosition: '100% center', opacity: 0 }}\n      animate={\n        shouldAnimate ? { backgroundPosition: '0% center', opacity: 1 } : {}\n      }\n      transition={{\n        backgroundPosition: {\n          repeat: repeat ? Infinity : 0,\n          duration,\n          delay,\n          repeatDelay,\n          ease: 'linear',\n        },\n        opacity: { duration: 0.3, delay },\n      }}\n    >\n      {text}\n    </motion.span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/odysseyui/text-shimmer.tsx"
    }
  ],
  "type": "registry:ui"
}