Text Scramble Effect

<h2 class="scr" id="scr" data-text="CREATIVE">CREATIVE</h2>
<button class="scr-btn" id="scrBtn">Scramble</button>

body{background:#0d1426;flex-direction:column;gap:22px}
.scr{font:800 46px/1 ui-monospace,monospace;color:#ff7a18;letter-spacing:3px;margin:0}
.scr-btn{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#1a2540;border:0;border-radius:10px;padding:11px 22px;cursor:pointer}

var el=document.getElementById('scr'),chars='!<>-_\\/[]{}=+*^?#';
function scramble(){var t=el.dataset.text,i=0;clearInterval(el._t);el._t=setInterval(function(){el.textContent=t.split('').map(function(c,j){return j<i?t[j]:chars[Math.floor(Math.random()*chars.length)]}).join('');i+=1/3;if(i>=t.length){clearInterval(el._t);el.textContent=t}},30)}
document.getElementById('scrBtn').onclick=scramble;scramble();