Cursor Proximity Weight Nieuw

<!-- Cursor Proximity Weight · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="cpw"><span class="cpw__kick">Beweeg over de tekst</span><p class="cpw__t">Zoekwoorden die<br>klanten opleveren</p><span class="cpw__foot">SEO-bureau Rotterdam · vanaf € 650 per maand</span></div>
</div>

/* Cursor Proximity Weight · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.cpw{position:absolute;inset:0;background:#0a0a0a;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 18px;overflow:hidden;container-type:size}
.cpw__kick{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#F5480F;margin-bottom:8px}
.cpw__t{margin:0;font-family:'Switzer',system-ui,sans-serif;font-size:min(9.6cqw,17cqh);line-height:1.05;font-weight:400;letter-spacing:-.01em;cursor:default}
.cpw__c{display:inline-block}
.cpw__foot{margin-top:12px;font-size:12px;color:rgba(255,255,255,.6)}

// Cursor Proximity Weight · Bron: Fancy Components · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.cpw')||root;
var t=root.querySelector('.cpw__t'),cs=[];[].slice.call(t.childNodes).forEach(function(nd){if(nd.nodeType!==3)return;var fr=document.createDocumentFragment();nd.textContent.split('').forEach(function(ch){var s=document.createElement('span');s.className='cpw__c';s.textContent=ch===' '?String.fromCharCode(160):ch;fr.appendChild(s);cs.push(s);});t.replaceChild(fr,nd);});
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,mx=-1e4,my=-1e4,real=false,vis=true,R=140;
function apply(px,py){var b=root.getBoundingClientRect();cs.forEach(function(c){var r=c.getBoundingClientRect();var dx=r.left+r.width/2-b.left-px,dy=r.top+r.height/2-b.top-py;var d=Math.sqrt(dx*dx+dy*dy);var f=Math.max(0,1-d/R);f=f*f*(3-2*f);c.style.fontWeight=String(400+Math.round(f*5)*100);c.style.color=f>.6?'#F5480F':'';});}
root.addEventListener('pointermove',function(e){var b=root.getBoundingClientRect();mx=e.clientX-b.left;my=e.clientY-b.top;real=true;if(reduce)apply(mx,my);});root.addEventListener('pointerleave',function(){real=false;if(reduce)apply(-1e4,-1e4);});
if(reduce)return;if('IntersectionObserver' in window)new IntersectionObserver(function(es){vis=es[0].isIntersecting;}).observe(root);
(function loop(ts){if(vis){if(real)apply(mx,my);else{var W=root.clientWidth,H=root.clientHeight,k=ts/1000;apply(W*.5+Math.sin(k*.9)*W*.38,H*.5+Math.sin(k*1.7)*H*.16);}}requestAnimationFrame(loop);})(0);
}
init(document.querySelector('.jouw-container'));