{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "scramble-text",
  "type": "registry:ui",
  "title": "Scramble Text",
  "description": "Cyberpunk matrix character decryption animation on hover or trigger with glyph cyphers.",
  "category": "text",
  "dependencies": [],
  "files": [
    {
      "path": "registry/text/scramble-text/scramble-text.tsx",
      "type": "registry:ui",
      "target": "components/ui/scramble-text.tsx",
      "content": "import React, { useState } from 'react';\n\nconst CHARS = '!<>-_\\\\/[]{}—=+*^?#________';\n\nexport const ScrambleText: React.FC<{ text?: string }> = ({\n  text = 'DETERMINISTIC CODE EMISSION',\n}) => {\n  const [displayText, setDisplayText] = useState(text);\n\n  const scramble = () => {\n    let iteration = 0;\n    const interval = setInterval(() => {\n      setDisplayText(() =>\n        text\n          .split('')\n          .map((_, index) => {\n            if (index < iteration) return text[index];\n            return CHARS[Math.floor(Math.random() * CHARS.length)];\n          })\n          .join('')\n      );\n\n      if (iteration >= text.length) clearInterval(interval);\n      iteration += 1 / 2;\n    }, 30);\n  };\n\n  return (\n    <div\n      onMouseEnter={scramble}\n      className=\"flex flex-col items-center justify-center p-6 font-mono text-center cursor-pointer select-none\"\n    >\n      <span className=\"text-[10px] uppercase tracking-widest text-zinc-500 mb-2\">HOVER TO DECRYPT</span>\n      <h3 className=\"text-sm sm:text-base font-bold text-emerald-400 tracking-wider\">\n        {displayText}\n      </h3>\n    </div>\n  );\n};\n"
    }
  ]
}