{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmering-text",
  "type": "registry:component",
  "title": "Shimmering Text",
  "description": "Per-character shimmer animation for loading labels and badges",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@bklit/utils"
  ],
  "files": [
    {
      "path": "src/components/shimmering-text.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion, type Variants } from \"motion/react\";\nimport { type ComponentProps, useCallback } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ShimmeringTextProps = Omit<\n  ComponentProps<typeof motion.span>,\n  \"children\"\n> & {\n  /** The text to render with the shimmering effect. */\n  text: string;\n  /**\n   * Duration in seconds for one shimmer cycle.\n   * @defaultValue 1\n   */\n  duration?: number;\n  /**\n   * Pause the shimmer (e.g. when the hero leaves the viewport).\n   * @defaultValue false\n   */\n  paused?: boolean;\n  /**\n   * Legacy alias for `paused`.\n   * @defaultValue false\n   */\n  isStopped?: boolean;\n};\n\nexport function ShimmeringText({\n  text,\n  duration = 1,\n  isStopped = false,\n  paused = false,\n  className,\n  ...props\n}: ShimmeringTextProps) {\n  const reducedMotion = useReducedMotion();\n  const stopped = isStopped || paused || reducedMotion === true;\n\n  const createCharVariants = useCallback(\n    (charIndex: number): Variants => ({\n      running: {\n        color: [\"var(--color)\", \"var(--shimmering-color)\", \"var(--color)\"],\n        transition: {\n          duration,\n          repeat: Number.POSITIVE_INFINITY,\n          repeatType: \"loop\",\n          repeatDelay: text.length * 0.05,\n          delay: (charIndex * duration) / text.length,\n          ease: \"easeInOut\",\n        },\n      },\n      stopped: {\n        color: \"var(--color)\",\n        transition: {\n          duration: duration * 0.5,\n          ease: \"easeOut\",\n        },\n      },\n    }),\n    [duration, text.length]\n  );\n\n  return (\n    <motion.span\n      className={cn(\n        \"inline-flex select-none items-center leading-none\",\n        \"[--color:var(--muted-foreground)] [--shimmering-color:var(--foreground)]\",\n        className\n      )}\n      {...props}\n    >\n      {text.split(\"\").map((char, index) => (\n        <motion.span\n          animate={stopped ? \"stopped\" : \"running\"}\n          aria-hidden\n          className=\"inline-block whitespace-pre leading-none\"\n          initial=\"stopped\"\n          // biome-ignore lint/suspicious/noArrayIndexKey: static label text, order never changes\n          key={index}\n          variants={createCharVariants(index)}\n        >\n          {char}\n        </motion.span>\n      ))}\n      <span className=\"sr-only\">{text}</span>\n    </motion.span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/shimmering-text.tsx"
    }
  ]
}