{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer",
  "type": "registry:component",
  "title": "Shimmer",
  "description": "A monochrome moving highlight over progress text, with reduced-motion and forced-color fallbacks.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/shimmer.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { rs } from \"./rs\";\nimport { mq, vlak } from \"./tokens.stylex\";\n\nexport interface ShimmerProps extends React.HTMLAttributes<HTMLSpanElement> { children: string; active?: boolean; duration?: number; spread?: number }\nconst sweep = stylex.keyframes({ from: { backgroundPosition: \"100% 0\" }, to: { backgroundPosition: \"-100% 0\" } });\nconst styles = stylex.create({\n  root: { color: vlak.gray, \"--rs-shimmer-duration\": \"2s\", \"--rs-shimmer-spread\": \"15%\" },\n  active: { backgroundImage: \"linear-gradient(90deg, var(--text-secondary) 0%, var(--text-secondary) calc(50% - var(--rs-shimmer-spread, 15%)), var(--text) 50%, var(--text-secondary) calc(50% + var(--rs-shimmer-spread, 15%)), var(--text-secondary) 100%)\", backgroundSize: \"200% 100%\", backgroundClip: \"text\", color: { default: \"transparent\", [mq.reduce]: vlak.gray, [mq.forcedColors]: \"CanvasText\" }, animationName: { default: sweep, [mq.reduce]: \"none\", [mq.forcedColors]: \"none\" }, animationDuration: \"var(--rs-shimmer-duration, 2s)\", animationTimingFunction: \"linear\", animationIterationCount: \"infinite\" },\n});\n/** Animated text for supplied progress. Screen readers receive the text once, without token announcements. */\nexport const Shimmer = React.forwardRef<HTMLSpanElement, ShimmerProps>(function Shimmer({ children, active = true, duration = 2, spread = 15, className, style, ...props }, ref) {\n  const root = rs([\"rs-shimmer\", active && \"rs-shimmer-active\", className], styles.root, active && styles.active);\n  return <span ref={ref} {...props} className={root.className} style={{ ...root.style, \"--rs-shimmer-duration\": `${Math.max(0.2, Number.isFinite(duration) ? duration : 2)}s`, \"--rs-shimmer-spread\": `${Math.max(0, Math.min(50, Number.isFinite(spread) ? spread : 15))}%`, ...style } as React.CSSProperties}>{children}</span>;\n});\n",
      "type": "registry:component",
      "target": "components/vlak/shimmer.tsx"
    },
    {
      "path": "vlak/styles/shimmer.css",
      "content": "/* ── shimmer: generated from packages/react/src/components/shimmer.tsx ── */\n@keyframes rs-anim-sweep{from{background-position:100% 0}to{background-position:-100% 0}}\n.rs-shimmer{color:var(--text-secondary);--rs-shimmer-duration:2s;--rs-shimmer-spread:15%}\n.rs-shimmer-active{background-image:linear-gradient(90deg, var(--text-secondary) 0%, var(--text-secondary) calc(50% - var(--rs-shimmer-spread, 15%)), var(--text) 50%, var(--text-secondary) calc(50% + var(--rs-shimmer-spread, 15%)), var(--text-secondary) 100%);background-size:200% 100%;background-clip:text;color:transparent;animation-name:rs-anim-sweep;animation-duration:var(--rs-shimmer-duration, 2s);animation-timing-function:linear;animation-iteration-count:infinite}\n@media (prefers-reduced-motion: reduce){.rs-shimmer-active{color:var(--text-secondary);animation-name:none}}\n@media (forced-colors: active){.rs-shimmer-active{color:CanvasText;animation-name:none}}\n",
      "type": "registry:file",
      "target": "styles/vlak/shimmer.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "ai",
      "classes": [
        "rs-shimmer",
        "rs-shimmer-active"
      ],
      "snippet": "<span class=\"rs-shimmer rs-shimmer-active\">Reading the brief</span>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "Shimmer",
        "AI Elements Shimmer",
        "Streaming progress text"
      ],
      "example": "import { Shimmer } from \"@noorddev/vlak-react\";\n\nexport function ReadingStatus({ streaming }: { streaming: boolean }) {\n  return <Shimmer active={streaming}>Reading the brief</Shimmer>;\n}",
      "usage": {
        "use": [
          "Use short progress text while the application is working. Duration is in seconds; spread is a bounded percentage.",
          "Set active=false to keep the same text without animation."
        ],
        "avoid": [
          "Using animation as the only indication of progress."
        ]
      },
      "keyboard": [],
      "a11y": [
        "Reduced motion and forced colors keep the text static and readable.",
        "Text remains available to assistive technology; use an application status region for meaningful progress changes."
      ]
    }
  }
}