{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer-text",
  "title": "Shimmer Text",
  "description": "A light band that sweeps across text on a loop.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/new-york/shimmer-text/shimmer-text.tsx",
      "content": "\"use client\"\n\nimport { useEffect } from \"react\"\nimport { animate, motion, useMotionValue, useReducedMotion, useTransform } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface ShimmerTextProps {\n  children: string\n  /** Seconds for one sweep across the text. Default: 2 */\n  duration?: number\n  /** Width of the highlight band, in px. Default: 60 */\n  spread?: number\n  /** Pause between sweeps, in seconds. Default: 0.4 */\n  repeatDelay?: number\n  /** Base text color (any CSS color). Default: muted foreground */\n  baseColor?: string\n  /** Highlight color (any CSS color). Default: foreground */\n  shimmerColor?: string\n  className?: string\n}\n\nexport function ShimmerText({\n  children,\n  duration = 2,\n  spread = 60,\n  repeatDelay = 0.4,\n  baseColor = \"var(--muted-foreground)\",\n  shimmerColor = \"var(--foreground)\",\n  className,\n}: ShimmerTextProps) {\n  const reduced = useReducedMotion()\n  // Sweep progress: 0 = band fully off the left edge, 1 = fully off the right edge.\n  const progress = useMotionValue(0)\n  const band = spread * 2\n  // A solid, hard-edged band of the highlight color, revealed through a sliding clip-path.\n  const clipPath = useTransform(progress, (v) => {\n    const left = `max(0px, calc(${v * 100}% + ${2 * v * spread - band}px))`\n    const right = `max(0px, calc(${(1 - v) * 100}% - ${2 * v * spread}px))`\n    return `inset(0 ${right} 0 ${left})`\n  })\n\n  useEffect(() => {\n    if (reduced) {\n      progress.set(0)\n      return\n    }\n    progress.set(0)\n    const controls = animate(progress, 1, { duration, repeat: Infinity, repeatDelay, ease: \"linear\" })\n    return () => controls.stop()\n  }, [reduced, duration, repeatDelay, progress])\n\n  return (\n    <span className={cn(\"relative inline-block\", className)} style={{ color: baseColor }}>\n      {children}\n      <motion.span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute inset-0 select-none\"\n        style={{ color: shimmerColor, clipPath }}\n      >\n        {children}\n      </motion.span>\n    </span>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/shimmer-text",
  "type": "registry:component"
}