Golf onder de cursor

<!-- Golf onder de cursor · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-twv"><h3 class="ei-twv__h">Fietsenmaker de Spaak</h3><span class="ei-twv__k">Haarlem · sinds 1987</span></div>
</div>

/* Golf onder de cursor · NedDev · eigen werk. */
.ei-twv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 16px}
.ei-twv__h{margin:0;font-family:'Switzer',sans-serif;font-weight:800;font-size:clamp(22px,4.8vw,34px);letter-spacing:-.025em;color:#0a0a0a;text-align:center;cursor:default}
.ei-twv__c{display:inline-block;will-change:transform}
.ei-twv__k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#F5480F}

// Golf onder de cursor · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-twv'),h=w.querySelector('.ei-twv__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-twv__c';s.setAttribute('aria-hidden','true');s.textContent=ch===' '?'\u00a0':ch;h.appendChild(s);cs.push({el:s,y:0});});
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,mx=-9999,user=false,t0=performance.now();
w.addEventListener('mousemove',function(e){user=true;mx=e.clientX;});w.addEventListener('mouseleave',function(){user=false;mx=-9999;});
if(!reduce)(function loop(now){if(!w.isConnected)return;var b=h.getBoundingClientRect();var x=user?mx:b.left+((now-t0)/2600%1.4-.2)*b.width;var sig=Math.max(28,b.width*.07);
  cs.forEach(function(c){var r=c.el.getBoundingClientRect(),d=(r.left+r.width/2-x)/sig,tgt=-16*Math.exp(-d*d);c.y+=(tgt-c.y)*.18;c.el.style.transform='translateY('+c.y.toFixed(2)+'px)';c.el.style.color=tgt<-9?'#F5480F':'';});
  requestAnimationFrame(loop);})(t0);
}
init(document.querySelector('.jouw-container'));