{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmering-text",
  "title": "Shimmering Text",
  "description": "Words with a light moving across them, for the wait between asking and the first token.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/shimmering-text/shimmering-text.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type ShimmeringTextProps = React.HTMLAttributes<HTMLSpanElement> & {\n  children: React.ReactNode\n  /** Seconds for one pass of the sweep. */\n  duration?: number\n  /** How wide the bright band is, as a fraction of the text. */\n  extent?: number\n  /** Stops the sweep and leaves the words as they are. */\n  paused?: boolean\n}\n\n/**\n * Words with a light moving across them, for the wait between asking and the\n * first token. The text is ordinary text: the sweep is a background it is\n * clipped to, so it can be read, selected and announced whether or not the\n * animation runs.\n */\nexport function ShimmeringText({\n  children,\n  duration = 2.4,\n  extent = 0.35,\n  paused = false,\n  className,\n  style,\n  ...rootProps\n}: ShimmeringTextProps) {\n  const band = Math.min(Math.max(extent, 0.05), 1)\n\n  return (\n    <span\n      data-slot=\"shimmering-text\"\n      className={cn(\n        \"text-muted-foreground bg-clip-text\",\n        // The sweep is decoration. Without it the words keep their own colour,\n        // which is why the fallback is a colour and not transparency.\n        !paused &&\n          \"motion-safe:animate-[mischief-shimmering-text_var(--shimmer-duration)_linear_infinite] motion-safe:text-transparent\",\n        className\n      )}\n      style={\n        {\n          \"--shimmer-duration\": `${duration}s`,\n          backgroundImage:\n            \"linear-gradient(90deg, transparent 0%, var(--foreground) 50%, transparent 100%)\",\n          backgroundSize: `${Math.round(band * 300)}% 100%`,\n          backgroundRepeat: \"no-repeat\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rootProps}\n    >\n      {children}\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    "@keyframes mischief-shimmering-text": {
      "from": {
        "background-position": "-150% 0"
      },
      "to": {
        "background-position": "250% 0"
      }
    }
  },
  "categories": [
    "feedback",
    "loading",
    "text",
    "streaming"
  ],
  "type": "registry:ui"
}