Letterdikte op cursor

<!-- Letterdikte op cursor · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-vwh"><h3 class="ei-vwh__h">Drukwerk met karakter</h3><span class="ei-vwh__k">beweeg over de kop</span></div>
</div>

/* Letterdikte op cursor · NedDev · eigen werk. */
.ei-vwh{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 16px}
.ei-vwh__h{margin:0;font-family:'Switzer',sans-serif;font-weight:300;font-size:clamp(24px,5vw,36px);letter-spacing:-.02em;color:#0a0a0a;text-align:center;line-height:1.1;cursor:default}
.ei-vwh__c{display:inline-block;transition:font-weight .12s linear,color .2s}
.ei-vwh__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.45)}

// Letterdikte op cursor · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-vwh'),h=w.querySelector('.ei-vwh__h'),txt=h.textContent;h.textContent='';h.setAttribute('aria-label',txt);
var cs=[];txt.split('').forEach(function(ch){var s=document.createElement('span');s.className='ei-vwh__c';s.setAttribute('aria-hidden','true');s.textContent=ch===' '?'\u00a0':ch;h.appendChild(s);cs.push(s);});
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,user=false,mx=-999,my=-999;
function paint(){var R=Math.max(70,h.offsetWidth*.18);cs.forEach(function(s){var b=s.getBoundingClientRect(),dx=b.left+b.width/2-mx,dy=b.top+b.height/2-my,d=Math.sqrt(dx*dx+dy*dy),k=Math.max(0,1-d/R);k=k*k*(3-2*k);
  s.style.fontWeight=Math.round((300+600*k)/100)*100;s.style.color=k>.55?'#F5480F':'';});}
w.addEventListener('mousemove',function(e){user=true;mx=e.clientX;my=e.clientY;paint();});
w.addEventListener('mouseleave',function(){user=false;});
if(!reduce){var t0=performance.now();(function auto(now){if(!w.isConnected)return;if(!user){var b=h.getBoundingClientRect(),p=(Math.sin((now-t0)/1100)+1)/2;mx=b.left+p*b.width;my=b.top+b.height/2;paint();}requestAnimationFrame(auto);})(t0);}
}
init(document.querySelector('.jouw-container'));