Letters ontcijferen

<!-- Letters ontcijferen · NedDev · eigen werk. -->
<div class="jouw-container">
<nav class="ei-scr" aria-label="Voorbeeldmenu"><a href="#" class="ei-scr__a"><span class="ei-scr__n">01</span><span class="ei-scr__t">Projecten</span></a><a href="#" class="ei-scr__a"><span class="ei-scr__n">02</span><span class="ei-scr__t">Werkwijze</span></a><a href="#" class="ei-scr__a"><span class="ei-scr__n">03</span><span class="ei-scr__t">Contact</span></a></nav>
</div>

/* Letters ontcijferen · NedDev · eigen werk. */
.ei-scr{display:flex;flex-direction:column;width:78%;max-width:300px}
.ei-scr__a{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid rgba(10,10,10,.14);text-decoration:none;color:#0a0a0a;font-family:'JetBrains Mono',monospace}
.ei-scr__n{font-size:11px;color:rgba(10,10,10,.45)}
.ei-scr__t{font-size:clamp(17px,3vw,21px);font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.ei-scr__a:hover .ei-scr__t,.ei-scr__a:focus-visible .ei-scr__t{color:#F5480F}
.ei-scr__a:hover .ei-scr__n{color:#F5480F}

// Letters ontcijferen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-scr');var G='ABCDEFGHJKLMNPRSTUVWXZ0123456789#%&/+=<>';
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
[].forEach.call(w.querySelectorAll('.ei-scr__a'),function(a){var t=a.querySelector('.ei-scr__t'),real=t.textContent,raf=0;
  function go(){if(reduce)return;cancelAnimationFrame(raf);var t0=performance.now(),dur=520+real.length*30;
    (function f(now){var p=Math.min(1,(now-t0)/dur),fixed=Math.floor(p*real.length),s='';
      for(var i=0;i<real.length;i++){s+=i<fixed||real[i]===' '?real[i]:G[(Math.random()*G.length)|0];}
      t.textContent=s;if(p<1)raf=requestAnimationFrame(f);else t.textContent=real;})(t0);}
  a.addEventListener('mouseenter',go);a.addEventListener('focus',go);a.addEventListener('click',function(e){e.preventDefault();});});
var first=w.querySelector('.ei-scr__a');setTimeout(function(){first.dispatchEvent(new Event('mouseenter'));},400);
}
init(document.querySelector('.jouw-container'));