{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-scramble",
  "type": "registry:component",
  "title": "Text scramble",
  "description": "A text effect that scrambles random glyphs and resolves to the final string letter by letter when it scrolls into view. Its aria-label keeps the real text.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/text-scramble.tsx",
      "type": "registry:ui",
      "target": "components/ui/text-scramble.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { useInView, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nconst GLYPHS = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\"\n\nfunction TextScramble({\n  text = \"PREMIUM MOTION\",\n  className,\n}: {\n  text?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const ref = React.useRef<HTMLParagraphElement>(null)\n  const inView = useInView(ref, { once: true, amount: 0.8 })\n  const [display, setDisplay] = React.useState(text)\n\n  React.useEffect(() => {\n    if (!inView) return\n    if (reduce) {\n      setDisplay(text)\n      return\n    }\n    let frame = 0\n    const total = text.length * 3\n    const id = window.setInterval(() => {\n      frame += 1\n      setDisplay(\n        text\n          .split(\"\")\n          .map((ch, i) => {\n            if (ch === \" \") return \" \"\n            if (frame > i * 3 + 8) return text[i]\n            return GLYPHS[Math.floor(Math.random() * GLYPHS.length)]\n          })\n          .join(\"\")\n      )\n      if (frame > total) {\n        setDisplay(text)\n        window.clearInterval(id)\n      }\n    }, 28)\n    return () => window.clearInterval(id)\n  }, [inView, text, reduce])\n\n  return (\n    <p\n      ref={ref}\n      data-slot=\"text-scramble\"\n      data-tier=\"premium\"\n      className={cn(\"font-mono text-2xl font-medium tracking-[0.08em] text-fg sm:text-3xl\", className)}\n      aria-label={text}\n    >\n      {display}\n    </p>\n  )\n}\nexport { TextScramble }\n"
    }
  ]
}