DecryptedText-JS-CSS.json

{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "DecryptedText-JS-CSS",
	"title": "DecryptedText",
	"description": "Hacker-style decryption cycling random glyphs until resolving to real text.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "DecryptedText/DecryptedText.jsx",
			"content": "import { useEffect, useState, useRef } from 'react';\nimport { motion } from 'motion/react';\n\nconst styles = {\n  wrapper: {\n    display: 'inline-block',\n    whiteSpace: 'pre-wrap'\n  },\n  srOnly: {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0,0,0,0)',\n    border: 0\n  }\n};\n\nexport default function DecryptedText({\n  text,\n  speed = 50,\n  maxIterations = 10,\n  sequential = false,\n  revealDirection = 'start',\n  useOriginalCharsOnly = false,\n  characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+',\n  className = '',\n  parentClassName = '',\n  encryptedClassName = '',\n  animateOn = 'hover',\n  ...props\n}) {\n  const [displayText, setDisplayText] = useState(text);\n  const [isHovering, setIsHovering] = useState(false);\n  const [clickCount, setClickCount] = useState(0);\n  const [isScrambling, setIsScrambling] = useState(false);\n  const [revealedIndices, setRevealedIndices] = useState(new Set());\n  const [hasAnimated, setHasAnimated] = useState(false);\n  const containerRef = useRef(null);\n\n  useEffect(() => {\n    let interval;\n    let currentIteration = 0;\n\n    const getNextIndex = revealedSet => {\n      const textLength = text.length;\n      switch (revealDirection) {\n        case 'start':\n          return revealedSet.size;\n        case 'end':\n          return textLength - 1 - revealedSet.size;\n        case 'center': {\n          const middle = Math.floor(textLength / 2);\n          const offset = Math.floor(revealedSet.size / 2);\n          const nextIndex = revealedSet.size % 2 === 0 ? middle + offset : middle - offset - 1;\n\n          if (nextIndex >= 0 && nextIndex < textLength && !revealedSet.has(nextIndex)) {\n            return nextIndex;\n          }\n\n          for (let i = 0; i < textLength; i++) {\n            if (!revealedSet.has(i)) return i;\n          }\n          return 0;\n        }\n        default:\n          return revealedSet.size;\n      }\n    };\n\n    const availableChars = useOriginalCharsOnly\n      ? Array.from(new Set(text.split(''))).filter(char => char !== ' ')\n      : characters.split('');\n\n    const shuffleText = (originalText, currentRevealed) => {\n      if (useOriginalCharsOnly) {\n        const positions = originalText.split('').map((char, i) => ({\n          char,\n          isSpace: char === ' ',\n          index: i,\n          isRevealed: currentRevealed.has(i)\n        }));\n\n        const nonSpaceChars = positions.filter(p => !p.isSpace && !p.isRevealed).map(p => p.char);\n\n        for (let i = nonSpaceChars.length - 1; i > 0; i--) {\n          const j = Math.floor(Math.random() * (i + 1));\n          [nonSpaceChars[i], nonSpaceChars[j]] = [nonSpaceChars[j], nonSpaceChars[i]];\n        }\n\n        let charIndex = 0;\n        return positions\n          .map(p => {\n            if (p.isSpace) return ' ';\n            if (p.isRevealed) return originalText[p.index];\n            return nonSpaceChars[charIndex++];\n          })\n          .join('');\n      } else {\n        return originalText\n          .split('')\n          .map((char, i) => {\n            if (char === ' ') return ' ';\n            if (currentRevealed.has(i)) return originalText[i];\n            return availableChars[Math.floor(Math.random() * availableChars.length)];\n          })\n          .join('');\n      }\n    };\n\n    if (isHovering) {\n      setIsScrambling(true);\n      interval = setInterval(() => {\n        setRevealedIndices(prevRevealed => {\n          if (sequential) {\n            if (prevRevealed.size < text.length) {\n              const nextIndex = getNextIndex(prevRevealed);\n              const newRevealed = new Set(prevRevealed);\n              newRevealed.add(nextIndex);\n              setDisplayText(shuffleText(text, newRevealed));\n              return newRevealed;\n            } else {\n              clearInterval(interval);\n              setIsScrambling(false);\n              return prevRevealed;\n            }\n          } else {\n            setDisplayText(shuffleText(text, prevRevealed));\n            currentIteration++;\n            if (currentIteration >= maxIterations) {\n              clearInterval(interval);\n              setIsScrambling(false);\n              setDisplayText(text);\n            }\n            return prevRevealed;\n          }\n        });\n      }, speed);\n    } else {\n      setDisplayText(text);\n      setRevealedIndices(new Set());\n      setIsScrambling(false);\n    }\n\n    return () => {\n      if (interval) clearInterval(interval);\n    };\n  }, [isHovering, text, speed, maxIterations, sequential, revealDirection, characters, useOriginalCharsOnly]);\n\n  useEffect(() => {\n    if (animateOn !== 'click') return;\n    if (clickCount === 0) return;\n\n    setIsHovering(false);\n    const timeout = setTimeout(() => setIsHovering(true), 0);\n\n    return () => clearTimeout(timeout);\n  }, [clickCount, animateOn]);\n\n  useEffect(() => {\n    if (animateOn !== 'view' && animateOn !== 'inViewHover') return;\n\n    const observerCallback = entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting && !hasAnimated) {\n          setIsHovering(true);\n          setHasAnimated(true);\n        }\n      });\n    };\n\n    const observerOptions = {\n      root: null,\n      rootMargin: '0px',\n      threshold: 0.1\n    };\n\n    const observer = new IntersectionObserver(observerCallback, observerOptions);\n    const currentRef = containerRef.current;\n    if (currentRef) {\n      observer.observe(currentRef);\n    }\n\n    return () => {\n      if (currentRef) {\n        observer.unobserve(currentRef);\n      }\n    };\n  }, [animateOn, hasAnimated]);\n\n  const animateProps =\n    animateOn === 'hover' || animateOn === 'inViewHover'\n      ? {\n          onMouseEnter: () => setIsHovering(true),\n          onMouseLeave: () => setIsHovering(false)\n        }\n      : animateOn === 'click'\n        ? {\n            onClick: () => setClickCount(c => c + 1)\n          }\n        : {};\n\n  return (\n    <motion.span className={parentClassName} ref={containerRef} style={styles.wrapper} {...animateProps} {...props}>\n      <span style={styles.srOnly}>{displayText}</span>\n\n      <span aria-hidden=\"true\">\n        {displayText.split('').map((char, index) => {\n          const isRevealedOrDone = revealedIndices.has(index) || !isScrambling || !isHovering;\n\n          return (\n            <span key={index} className={isRevealedOrDone ? className : encryptedClassName}>\n              {char}\n            </span>\n          );\n        })}\n      </span>\n    </motion.span>\n  );\n}\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"motion@^12.23.12"
	]
}