{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "weave-text",
  "type": "registry:ui",
  "title": "Weave Text",
  "description": "Text filled with a slow-drifting gradient, woven from a palette you control.",
  "registryDependencies": [
    "utils",
    "use-in-viewport"
  ],
  "files": [
    {
      "path": "registry/loomui/weave-text.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useInViewport } from \"@/registry/lib/use-in-viewport\"\n\nexport interface WeaveTextProps extends React.ComponentProps<\"span\"> {\n  /**\n   * Colors woven through the gradient, left to right. The first color is\n   * repeated at the end so the loop is seamless.\n   */\n  colors?: string[]\n  /** Seconds for one full pass. Lower is faster. */\n  duration?: number\n  /** Render a static gradient with no animation. */\n  paused?: boolean\n}\n\nconst DEFAULT_COLORS = [\"#2dd4bf\", \"#38bdf8\", \"#3b82f6\", \"#67e8f9\"]\n\nexport function WeaveText({\n  children,\n  className,\n  colors = DEFAULT_COLORS,\n  duration = 8,\n  paused = false,\n  style,\n  ...props\n}: WeaveTextProps) {\n  const root = React.useRef<HTMLSpanElement>(null)\n  const onScreen = useInViewport(root)\n  const backgroundImage = React.useMemo(() => {\n    const stops = colors.length > 0 ? colors : DEFAULT_COLORS\n    return `linear-gradient(90deg, ${[...stops, stops[0]].join(\", \")})`\n  }, [colors])\n\n  return (\n    <span\n      ref={root}\n      data-slot=\"weave-text\"\n      className={cn(\n        \"inline-block bg-[length:200%_auto] bg-clip-text text-transparent\",\n        !paused && \"animate-weave motion-reduce:animate-none\",\n        !onScreen && \"[animation-play-state:paused]\",\n        className\n      )}\n      style={{\n        backgroundImage,\n        animationDuration: `${duration}s`,\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-weave": "weave 8s linear infinite"
    }
  },
  "css": {
    "@keyframes weave": {
      "from": {
        "background-position": "0% 50%"
      },
      "to": {
        "background-position": "200% 50%"
      }
    }
  }
}