텍스트 스크램블

<span id="txsEl">HOVER ME</span>

#txsEl{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(18px,6.5vmin,30px);
  font-weight:700;letter-spacing:.04em;color:var(--fg);cursor:pointer}

let auto=true;
addEventListener('pointerdown',()=>{auto=false;},{capture:true});
addEventListener('pointermove',()=>{auto=false;},{capture:true});
const el=document.getElementById('txsEl');
const CHARS='ABCDEFGHIJKLMNOPQRSTUVWXYZ#%&$*+-01';
const phrases=['HOVER ME','SCRAMBLE','DECODED','TRY ME'];
let phraseIdx=0, running=false;
function scrambleTo(text){
  if(running) return; running=true;
  const len=Math.max(el.textContent.length,text.length);
  const totalFrames=24;
  let frame=0;
  function step(){
    let out='';
    for(let i=0;i<len;i++){
      if(i<text.length && frame/totalFrames > i/len) out+=text[i];
      else out+=CHARS[Math.floor(Math.random()*CHARS.length)];
    }
    el.textContent=out;
    frame++;
    if(frame<=totalFrames) requestAnimationFrame(step);
    else el.textContent=text, running=false;
  }
  step();
}
el.addEventListener('pointerenter',()=>{
  auto=false;
  phraseIdx=(phraseIdx+1)%phrases.length;
  scrambleTo(phrases[phraseIdx]);
});
async function autoSeq(){
  while(auto){
    await new Promise(res=>{ const s=performance.now(); (function st(now){ if(!auto) return res(); if(now-s<1400) requestAnimationFrame(st); else res(); })(performance.now()); });
    if(!auto) break;
    phraseIdx=(phraseIdx+1)%phrases.length;
    scrambleTo(phrases[phraseIdx]);
  }
}
autoSeq();