Schaduw volgt de lamp Nieuw

<!-- Schaduw volgt de lamp · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="t7l" tabindex="0" aria-label="Lamp verplaatsen met de pijltjes">
<span class="t7l__lamp" aria-hidden="true"></span>
<h3 class="t7l__h">Licht waar je het wilt</h3>
<p class="t7l__p">Lampenwinkel Lumen in Eindhoven. Beweeg de lamp over de muur.</p>
</div>
</div>

/* Schaduw volgt de lamp · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.t7l{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 20px;container-type:size;font-family:'Switzer',sans-serif;box-sizing:border-box;overflow:hidden;cursor:none;touch-action:pan-y;outline:none;--lx:20%;--ly:20%;background:radial-gradient(circle at var(--lx) var(--ly),#fff8ef 0,#f4f3f1 32%,#dedbd6 78%)}
.t7l:focus-visible{box-shadow:inset 0 0 0 2px #F5480F}
.t7l__lamp{position:absolute;left:var(--lx);top:var(--ly);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #F5480F,0 0 24px 8px rgba(255,200,150,.8);pointer-events:none}
.t7l__h{position:relative;margin:0;font-weight:800;font-size:clamp(28px,10cqi,52px);line-height:1.05;letter-spacing:-.02em;color:#0a0a0a;text-align:center;text-wrap:balance}
.t7l__wd{display:inline-block;white-space:nowrap}
.t7l__c{display:inline-block}
.t7l__p{position:relative;margin:0;font-size:clamp(12px,3.3cqi,15px);line-height:1.45;color:#3a3a3a;text-align:center}

// Schaduw volgt de lamp · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.t7l'),h=w.querySelector('.t7l__h'),txt=h.textContent;h.textContent='';h.setAttribute('aria-label',txt);
var C=[];txt.split(' ').forEach(function(word,wi){if(wi)h.appendChild(document.createTextNode(' '));var ws=document.createElement('span');ws.className='t7l__wd';ws.setAttribute('aria-hidden','true');word.split('').forEach(function(ch){var s=document.createElement('span');s.className='t7l__c';s.textContent=ch;ws.appendChild(s);C.push(s);});h.appendChild(ws);});
var lx=.2,ly=.2,raf=0,user=false,reduce=matchMedia('(prefers-reduced-motion: reduce)').matches,N=reduce?8:18;
function paint(){raf=0;var b=w.getBoundingClientRect(),X=b.left+lx*b.width,Y=b.top+ly*b.height;w.style.setProperty('--lx',(lx*100).toFixed(2)+'%');w.style.setProperty('--ly',(ly*100).toFixed(2)+'%');
C.forEach(function(s){var r=s.getBoundingClientRect(),dx=r.left+r.width/2-X,dy=r.top+r.height/2-Y,d=Math.sqrt(dx*dx+dy*dy)||1,len=Math.min(54,8+d*.16),ux=dx/d,uy=dy/d,sh=[];
for(var i=1;i<=N;i++){var k=i/N,a=.2*Math.pow(1-k,1.6);sh.push((ux*len*k).toFixed(1)+'px '+(uy*len*k).toFixed(1)+'px '+(k*3).toFixed(1)+'px rgba(10,10,10,'+a.toFixed(3)+')');}s.style.textShadow=sh.join(',');});}
function req(){if(!raf)raf=requestAnimationFrame(paint);}
w.addEventListener('pointermove',function(e){user=true;var b=w.getBoundingClientRect();lx=Math.max(0,Math.min(1,(e.clientX-b.left)/b.width));ly=Math.max(0,Math.min(1,(e.clientY-b.top)/b.height));req();});
w.addEventListener('keydown',function(e){var d={ArrowLeft:[-.05,0],ArrowRight:[.05,0],ArrowUp:[0,-.05],ArrowDown:[0,.05]}[e.key];if(!d)return;e.preventDefault();user=true;lx=Math.max(0,Math.min(1,lx+d[0]));ly=Math.max(0,Math.min(1,ly+d[1]));req();});
if('ResizeObserver' in window)new ResizeObserver(req).observe(w);if(document.fonts&&document.fonts.ready)document.fonts.ready.then(req);paint();
if(!reduce&&'IntersectionObserver' in window){var io=new IntersectionObserver(function(en){if(!en[0].isIntersecting)return;io.disconnect();var t0=performance.now();(function sweep(now){if(user||!w.isConnected)return;var p=Math.min(1,(now-t0)/2600),e=p<.5?2*p*p:1-Math.pow(-2*p+2,2)/2;lx=.12+e*.76;ly=.2+Math.sin(p*Math.PI)*.06;paint();if(p<1)requestAnimationFrame(sweep);})(t0);},{threshold:.6});io.observe(w);}
}
init(document.querySelector('.jouw-container'));