{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer",
  "title": "Shimmer",
  "description": "A CSS utility that sweeps an animated highlight across text for live status and streaming states, with no component required.",
  "files": [
    {
      "path": "registry/default/shimmer/shimmer.css",
      "content": "/* -------------------------------------------------------------------------------------------------\n * Shimmer utility\n *\n * An animated highlight that sweeps across text — for live status / streaming\n * states (\"Generating response…\", \"Thinking…\"). The text is painted with\n * `background-clip: text` and a gradient highlight loops across it.\n *\n * Built on `currentColor` via relative color syntax, so the highlight is\n * derived from the element's own text color and adapts to any token (from\n * `text-muted-foreground` to a brand color) with no configuration. In dark\n * mode the highlight brightens automatically to stay visible.\n *\n * Import this file once in your global CSS (after `@import \"tailwindcss\"`):\n *   @import \"./components/ui/cubby-ui/shimmer.css\";\n *\n *   --shimmer-color:    highlight color (default: derived from currentColor)\n *   --shimmer-duration: one sweep, in ms (default 2000)\n *   --shimmer-spread:   width of the highlight band (default calc(3ch + 40px))\n *   --shimmer-angle:    tilt of the band in degrees (default 20)\n *\n * Note: distinct from the Skeleton component's box sweep (`.skeleton-shimmer`,\n * `@keyframes shimmer`). This is a text effect and uses `@keyframes tw-shimmer`.\n * -------------------------------------------------------------------------------------------------*/\n@property --shimmer-angle {\n  syntax: \"<angle>\";\n  inherits: true;\n  initial-value: 20deg;\n}\n@property --shimmer-image {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --shimmer-text-fill {\n  syntax: \"*\";\n  inherits: false;\n}\n\n@keyframes tw-shimmer {\n  from {\n    background-position: 100% 0;\n  }\n  to {\n    background-position: 0 0;\n  }\n}\n\n@utility shimmer {\n  --_spread: var(--shimmer-spread, calc(3ch + 40px));\n  --_base: currentColor;\n  --_highlight: var(\n    --shimmer-color,\n    oklch(from currentColor l c h / calc(alpha * 0.2))\n  );\n\n  background-image: var(\n    --shimmer-image,\n    linear-gradient(\n      calc(90deg + var(--shimmer-angle)),\n      var(--_base) calc(50% - var(--_spread)),\n      color-mix(in oklch, var(--_highlight), var(--_base) 50%)\n        calc(50% - var(--_spread) * 0.5),\n      var(--_highlight) 50%,\n      color-mix(in oklch, var(--_highlight), var(--_base) 50%)\n        calc(50% + var(--_spread) * 0.5),\n      var(--_base) calc(50% + var(--_spread))\n    )\n  );\n  background-repeat: no-repeat;\n  background-size: calc(200% + var(--_spread) * 2) 100%;\n  background-position: 0 0;\n  background-clip: text;\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: var(--shimmer-text-fill, transparent);\n  animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;\n\n  @variant dark {\n    --_highlight: var(\n      --shimmer-color,\n      oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.4))\n    );\n  }\n\n  &:where([dir=\"rtl\"], [dir=\"rtl\"] *) {\n    animation-direction: reverse;\n  }\n}\n\n@utility shimmer-once {\n  animation-iteration-count: 1;\n}\n\n@utility shimmer-reverse {\n  animation-direction: reverse;\n}\n\n@utility shimmer-none {\n  --shimmer-image: none;\n  --shimmer-text-fill: currentColor;\n}\n\n@utility shimmer-color-* {\n  --shimmer-color: --value(--color, [color]);\n  --shimmer-color: color-mix(\n    in oklch,\n    --value(--color, [color]) calc(--modifier(integer) * 1%),\n    transparent\n  );\n}\n\n@utility shimmer-duration-* {\n  --shimmer-duration: calc(--value(integer) * 1ms);\n}\n\n@utility shimmer-spread-* {\n  --shimmer-spread: calc(var(--spacing) * --value(integer));\n  --shimmer-spread: --value([length], [percentage]);\n}\n\n@utility shimmer-angle-* {\n  --shimmer-angle: calc(--value(integer) * 1deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .shimmer {\n    animation: none;\n    background-image: none;\n    -webkit-text-fill-color: currentColor;\n  }\n}\n",
      "type": "registry:file",
      "target": "components/ui/cubby-ui/shimmer.css"
    }
  ],
  "type": "registry:component"
}