{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"text-shimmer","title":"Text Shimmer","description":"Animated shimmer text for loading, tool runs, and other in-progress UI","files":[{"path":"components/nexus-ui/text-shimmer.tsx","content":"import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type TextShimmerProps = Omit<\n  React.HTMLAttributes<HTMLElement>,\n  \"color\"\n> & {\n  as?: React.ElementType;\n  /**\n   * Duration in seconds.\n   * @default 1\n   */\n  duration?: number;\n  /**\n   * Spread around center in percent points.\n   * @default 20\n   */\n  spread?: number;\n  /**\n   * Beam angle in degrees.\n   * @default 0\n   */\n  angle?: number;\n  /**\n   * Override highlight color.\n   */\n  color?: string;\n  /**\n   * Invert shimmer contrast.\n   * @default false\n   */\n  invert?: boolean;\n  /**\n   * Invert shimmer contrast in light theme only.\n   * @default false\n   */\n  invertLight?: boolean;\n  /**\n   * Invert shimmer contrast in dark theme only.\n   * @default false\n   */\n  invertDark?: boolean;\n  /**\n   * Delay before the next shimmer pass in seconds.\n   * @default 0\n   */\n  repeatDelay?: number;\n  /**\n   * Disable shimmer animation and render plain text.\n   * @default false\n   */\n  disableShimmer?: boolean;\n};\n\nexport function TextShimmer({\n  as: Comp = \"span\",\n  className,\n  style,\n  duration = 1,\n  repeatDelay = 0,\n  spread = 20,\n  angle = 0,\n  color,\n  invert = false,\n  invertLight = false,\n  invertDark = false,\n  disableShimmer = false,\n  children,\n  ...props\n}: TextShimmerProps) {\n  const id = React.useId();\n  const boundedSpread = Math.min(Math.max(spread, 5), 45);\n  const activeDuration = Math.max(duration, 0);\n  const pauseDuration = Math.max(repeatDelay, 0);\n  const totalDuration = Math.max(activeDuration + pauseDuration, 0.001);\n  const movePercent = (activeDuration / totalDuration) * 100;\n  const keyframeName = React.useMemo(\n    () => `nx-text-shimmer-${id.replace(/[^a-zA-Z0-9_-]/g, \"\")}`,\n    [id],\n  );\n  const start = 50 - boundedSpread;\n  const end = 50 + boundedSpread;\n  const edge = \"currentColor\";\n  const brightBeam =\n    color ??\n    \"oklch(from currentColor max(0.8, calc(l + 0.4)) c h / calc(alpha + 0.35))\";\n  const dimBeam =\n    color ??\n    \"oklch(from currentColor min(calc(l - 0.4), 0.2) c h / calc(alpha + 0.4))\";\n  const lightBeam = invert || invertLight ? dimBeam : brightBeam;\n  const darkBeam = invert || invertDark ? dimBeam : brightBeam;\n  const keyframes = `@keyframes ${keyframeName} {\n    0% { background-position: 100% 50%; }\n    ${movePercent}% { background-position: -60% 50%; }\n    100% { background-position: -100% 50%; }\n  }\n  [data-nx-text-shimmer=\"${keyframeName}\"] {\n    --nx-text-shimmer-beam: var(--nx-text-shimmer-beam-light);\n  }\n  .dark [data-nx-text-shimmer=\"${keyframeName}\"],\n  [data-theme=\"dark\"] [data-nx-text-shimmer=\"${keyframeName}\"] {\n    --nx-text-shimmer-beam: var(--nx-text-shimmer-beam-dark);\n  }`;\n  const shimmerVariables = disableShimmer\n    ? {}\n    : ({\n        \"--nx-text-shimmer-beam-light\": lightBeam,\n        \"--nx-text-shimmer-beam-dark\": darkBeam,\n      } as React.CSSProperties);\n  const shimmerStyle: React.CSSProperties = disableShimmer\n    ? {}\n    : {\n        backgroundImage: `linear-gradient(${90 + angle}deg, ${edge} ${start}%, var(--nx-text-shimmer-beam) 50%, ${edge} ${end}%)`,\n        animation: `${keyframeName} ${totalDuration}s linear infinite`,\n        WebkitTextFillColor: \"transparent\",\n      };\n\n  return (\n    <>\n      {!disableShimmer ? <style>{keyframes}</style> : null}\n      <Comp\n        data-nx-text-shimmer={keyframeName}\n        className={cn(\n          !disableShimmer && \"bg-size-[200%_auto] bg-clip-text\",\n          className,\n        )}\n        style={{\n          ...shimmerVariables,\n          ...shimmerStyle,\n          ...style,\n        } as React.CSSProperties}\n        {...props}\n      >\n        {children}\n      </Comp>\n    </>\n  );\n}\n","type":"registry:file","target":"~/components/nexus-ui/text-shimmer.tsx"}],"type":"registry:ui"}