Magnetische nav-indicator Nieuw

<!-- Magnetische nav-indicator · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="nmi"><div class="nmi__nav" role="navigation" aria-label="Hoofdmenu"><span class="nmi__ind" aria-hidden="true"></span>
<a class="nmi__a" href="#" data-d="Woningbouw, kantoren en zorg in de regio Utrecht.">Werk</a><a class="nmi__a is-on" href="#" data-d="Ontwerp, vergunning en directievoering onder één dak.">Diensten</a><a class="nmi__a" href="#" data-d="Van schets tot oplevering in vijf vaste stappen.">Aanpak</a><a class="nmi__a" href="#" data-d="Elf architecten en twee bouwkundigen, sinds 1998.">Team</a><a class="nmi__a" href="#" data-d="Oudegracht 88, Utrecht · 030 123 4567">Contact</a></div>
<div class="nmi__out"><span class="nmi__no">02 / 05</span><p class="nmi__t">Diensten</p><p class="nmi__d">Ontwerp, vergunning en directievoering onder één dak.</p></div></div>
</div>

/* Magnetische nav-indicator · NedDev · eigen werk. */
.nmi{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:14px;container-type:inline-size}
.nmi__nav{position:relative;display:flex;background:#0a0a0a;border-radius:999px;padding:4px}
.nmi__ind{position:absolute;top:4px;bottom:4px;left:0;width:10px;background:#F5480F;border-radius:999px;will-change:transform,width}
.nmi__a{position:relative;z-index:1;color:#d8d4ce;text-decoration:none;font:600 clamp(11px,3.4cqw,13px) 'Switzer',sans-serif;padding:8px clamp(8px,3cqw,14px);border-radius:999px;transition:color .2s;will-change:transform}
.nmi__a.is-hot,.nmi__a.is-on.is-hot{color:#fff}.nmi__a.is-on{color:#fff}
.nmi__a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.nmi__out{text-align:center;min-height:62px}
.nmi__no{font:500 10px 'JetBrains Mono',monospace;color:#F5480F;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.nmi__t{margin:4px 0 2px;font:700 22px/1 'Switzer',sans-serif;letter-spacing:-.03em;color:#0a0a0a}
.nmi__d{margin:0;font-size:12px;color:#57534e;max-width:28em}

// Magnetische nav-indicator · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.nmi')||root;
var nav=root.querySelector('.nmi__nav'),ind=root.querySelector('.nmi__ind'),as=[].slice.call(root.querySelectorAll('.nmi__a'));
var no=root.querySelector('.nmi__no'),tt=root.querySelector('.nmi__t'),dd=root.querySelector('.nmi__d');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
var act=1,px=null,real=false,x=0,w=10,vx=0,vw=0,t0=performance.now(),raf=0;
function box(a){return{l:a.offsetLeft,w:a.offsetWidth};}
function hot(){if(px===null)return as[act];var best=as[0];as.forEach(function(a){var b=box(a);if(px>=b.l&&px<=b.l+b.w)best=a;});if(px<box(as[0]).l)best=as[0];if(px>box(as[as.length-1]).l+box(as[as.length-1]).w)best=as[as.length-1];return best;}
function frame(now){
if(!real&&!rm){var span=nav.clientWidth;var ph=(now-t0)/1000;px=(ph<4.2)?span/2+Math.sin(ph*1.5)*span*.42:null;}
var h=hot(),b=box(h),tx=b.l,tw=b.w;
if(px!==null&&!rm){var c=b.l+b.w/2,d=px-c;tx=b.l+d*.22-Math.abs(d)*.08;tw=b.w+Math.abs(d)*.16;}
as.forEach(function(a){a.classList.toggle('is-hot',a===h);var bb=box(a),dx=(px===null||rm)?0:Math.max(-3,Math.min(3,(px-(bb.l+bb.w/2))*.05));a.style.transform=a===h?'translateX('+dx.toFixed(2)+'px)':'none';});
if(rm){x=tx;w=tw;}else{vx=(vx+(tx-x)*.2)*.62;vw=(vw+(tw-w)*.2)*.62;x+=vx;w+=vw;}
ind.style.transform='translateX('+x.toFixed(2)+'px)';ind.style.width=w.toFixed(2)+'px';raf=requestAnimationFrame(frame);}
nav.addEventListener('pointermove',function(e){real=true;px=e.clientX-nav.getBoundingClientRect().left;});
nav.addEventListener('pointerleave',function(){px=null;});
function setAct(i){act=i;as.forEach(function(a,j){a.classList.toggle('is-on',j===i);if(j===i)a.setAttribute('aria-current','page');else a.removeAttribute('aria-current');});no.textContent='0'+(i+1)+' / 05';tt.textContent=as[i].textContent;dd.textContent=as[i].getAttribute('data-d');}
as.forEach(function(a,i){a.addEventListener('click',function(e){e.preventDefault();real=true;setAct(i);});a.addEventListener('focus',function(){real=true;setAct(i);});});
var b0=box(as[act]);x=b0.l;w=b0.w;raf=requestAnimationFrame(frame);
}
init(document.querySelector('.jouw-container'));