{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer-text",
  "title": "Shimmer Text",
  "description": "A band of light passing over a status label, so “Thinking…” reads as in progress without inventing a percentage.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/miseui/ui/shimmer-text.tsx",
      "content": "import type * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nconst DEFAULT_SWEEP_SECONDS = 2.2\n/** Pause between passes. A band that never stops reads as a progress bar; one that breathes reads as thought. */\nconst REST_SECONDS = 0.5\n/**\n * The image is three text widths wide with the bright band in its middle, so background-position\n * 100% parks the band just past the left edge and 0% just past the right. Both ends show plain text,\n * which makes the loop seamless. Repeat (the default) keeps the text painted while the band is away.\n */\nconst BAND_SIZE = \"300% 100%\"\nconst SWEEP_START = \"100%\"\nconst SWEEP_END = \"0%\"\n/** Reduced motion: the band rests on the middle of the text, lit but still. */\nconst RESTING_POSITION = \"50%\"\nconst BAND_GRADIENT =\n  \"linear-gradient(90deg, var(--muted-foreground) 40%, var(--foreground) 50%, var(--muted-foreground) 60%)\"\n\ninterface ShimmerTextProps extends Omit<React.ComponentProps<\"span\">, \"children\"> {\n  children: string\n  /** False renders the text plainly, in whatever colour it inherits. */\n  active?: boolean\n  /** Seconds for one pass of the band across the text. */\n  duration?: number\n}\n\nfunction ShimmerText({\n  children,\n  active = true,\n  duration = DEFAULT_SWEEP_SECONDS,\n  className,\n  style,\n  ...props\n}: ShimmerTextProps) {\n  const reduceMotion = useReducedMotion()\n\n  return (\n    <span\n      data-slot=\"shimmer-text\"\n      data-active={active ? \"true\" : \"false\"}\n      className={className}\n      style={style}\n      {...props}\n    >\n      {active ? (\n        <motion.span\n          data-testid=\"shimmer-band\"\n          data-reduced={reduceMotion ? \"true\" : \"false\"}\n          className=\"inline-block bg-clip-text text-transparent\"\n          style={{ backgroundImage: BAND_GRADIENT, backgroundSize: BAND_SIZE }}\n          initial={{ backgroundPositionX: reduceMotion ? RESTING_POSITION : SWEEP_START }}\n          animate={{ backgroundPositionX: reduceMotion ? RESTING_POSITION : [SWEEP_START, SWEEP_END] }}\n          transition={\n            reduceMotion\n              ? { duration: 0 }\n              : { duration, ease: \"easeInOut\", repeat: Infinity, repeatDelay: REST_SECONDS }\n          }\n        >\n          {children}\n        </motion.span>\n      ) : (\n        children\n      )}\n    </span>\n  )\n}\n\nexport { ShimmerText, type ShimmerTextProps }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "text"
  ],
  "type": "registry:ui"
}