'use client' // npm install framer-motion geist // font-pkg: geist/font/pixel|GeistPixelGrid import { useState, useEffect } from 'react' import { motion } from 'framer-motion' import { GeistPixelGrid } from 'geist/font/pixel' // ─── ScrambleText ────────────────────────────────────────────────────────────── // Idle: all characters continuously scramble (olive random chars) in a loop. // Hover: characters decrypt one by one, left to right, revealing the real word. // Mouse leave: immediately back to scrambled loop. const CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%&!' const WORDS = ['DECRYPT', 'ACCESS'] function randomChar(): string { return CHARSET[Math.floor(Math.random() * CHARSET.length)] ?? 'X' } interface CharState { display: string resolved: boolean } const makeScrambled = (word: string): CharState[] => word.split('').map(() => ({ display: randomChar(), resolved: false })) function useScramble(word: string, isHovered: boolean) { const [chars, setChars] = useState(() => makeScrambled(word)) useEffect(() => { let cancelled = false const timeouts: ReturnType[] = [] let scrambleInterval: ReturnType | null = null function startScrambleInterval(resolvedSet: Set) { if (scrambleInterval) clearInterval(scrambleInterval) scrambleInterval = setInterval(() => { if (cancelled) return setChars(prev => prev.map((ch, i) => resolvedSet.has(i) ? ch : { display: randomChar(), resolved: false }) ) }, 60) } if (isHovered) { const resolvedSet = new Set() startScrambleInterval(resolvedSet) word.split('').forEach((letter, i) => { const t = setTimeout(() => { if (cancelled) return resolvedSet.add(i) setChars(prev => prev.map((ch, idx) => idx === i ? { display: letter, resolved: true } : ch) ) if (resolvedSet.size === word.length && scrambleInterval) { clearInterval(scrambleInterval) scrambleInterval = null } }, 80 + i * 100) timeouts.push(t) }) } else { setChars(makeScrambled(word)) startScrambleInterval(new Set()) } return () => { cancelled = true timeouts.forEach(clearTimeout) if (scrambleInterval) clearInterval(scrambleInterval) } }, [isHovered, word]) return chars } function Crosshair({ style }: { style: React.CSSProperties }) { const color = 'rgba(190,207,93,0.35)' const arm = 14 // arm length in px const gap = 3 // gap from center to arm start const thick = 1 // line thickness return (

) } export default function ScrambleText() { const [isHovered, setIsHovered] = useState(false) const chars0 = useScramble(WORDS[0]!, isHovered) const chars1 = useScramble(WORDS[1]!, isHovered) const rows = [chars0, chars1] return (

{/* Crosshair — top right */} {/* Crosshair — bottom left */}

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {rows.map((chars, rowIdx) => (

{rowIdx === 0 && ( / )} {chars.map((ch, i) => ( {ch.display} ))} {rowIdx === rows.length - 1 && ( _ )}

))} {/* Hint */} hover to decrypt

) }

Encrypted Text

Text Blur Reveal