Magneetletters op de koelkast New

<!-- Magneetletters op de koelkast · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="t7m">
<div class="t7m__board" role="group" aria-label="Magneetletters die samen De Vlinder vormen" data-text="De Vlinder"></div>
<div class="t7m__foot">
<p class="t7m__p"><span class="t7m__sr">De Vlinder. </span>Kinderopvang in Amersfoort, open 7.30 tot 18.30 uur.</p>
<div class="t7m__acts"><button class="t7m__btn" type="button" data-act="mix">Husselen</button><button class="t7m__btn" type="button" data-act="order">Netjes zetten</button></div>
</div>
</div>
</div>

/* Magneetletters op de koelkast · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.t7m{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 16px;gap:8px;container-type:size;font-family:'Switzer',sans-serif;box-sizing:border-box;background:linear-gradient(90deg,#f4f3f1,#ecebe8)}
.t7m__board{position:relative;flex:1;min-height:0}
.t7m__l{position:absolute;left:0;top:0;margin:0;padding:0 2px;min-width:26px;text-align:center;border:0;background:none;font:900 clamp(34px,12.5cqi,58px)/1 'Switzer',sans-serif;letter-spacing:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 2px 0 rgba(10,10,10,.22)) drop-shadow(0 4px 4px rgba(10,10,10,.18));transition:transform .62s cubic-bezier(.3,1.45,.5,1)}
.t7m__l.is-drag{transition:none;cursor:grabbing;z-index:5;filter:drop-shadow(0 4px 0 rgba(10,10,10,.18)) drop-shadow(0 10px 10px rgba(10,10,10,.2))}
.t7m__l:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px;border-radius:4px;z-index:4}
.t7m__g{display:inline-block}
.t7m__l--o{color:#F5480F}.t7m__l--z{color:#0a0a0a}
.t7m__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.t7m__p{margin:0;font-size:clamp(12px,3.1cqi,14px);line-height:1.35;color:#3a3a3a}
.t7m__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.t7m__acts{display:flex;gap:6px;flex:none}
.t7m__btn{min-height:30px;padding:6px 10px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:600 13px/1.2 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s,color .16s}
.t7m__btn:hover{background:#0a0a0a;color:#fff}
.t7m__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}

// Magneetletters op de koelkast · © 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('.t7m'),board=w.querySelector('.t7m__board'),txt=board.dataset.text;var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var M=[],ci=0;txt.split('').forEach(function(ch,i){if(ch===' ')return;var b=document.createElement('button');b.type='button';b.className='t7m__l '+(ci%2?'t7m__l--z':'t7m__l--o');var g=document.createElement('span');g.className='t7m__g';g.textContent=ch;b.appendChild(g);b.setAttribute('aria-label','Letter '+ch+', verplaats met de pijltjes');board.appendChild(b);M.push({el:b,x:0,y:0,r:0,gapBefore:i>0&&txt[i-1]===' '});ci++;});
if(reduce)M.forEach(function(m){m.el.style.transition='none';});
function put(m){m.el.style.transform='translate('+m.x.toFixed(1)+'px,'+m.y.toFixed(1)+'px) rotate('+m.r.toFixed(1)+'deg)';}
function bw(){return board.clientWidth;}function bh(){return board.clientHeight;}
function clamp(m){var ww=m.el.offsetWidth,hh=m.el.offsetHeight;m.x=Math.max(0,Math.min(bw()-ww,m.x));m.y=Math.max(0,Math.min(bh()-hh,m.y));}
function gw(m){return m.el.firstChild.offsetWidth*1.06;}
function order(){var sp=gw(M[0])*.42,tot=0;M.forEach(function(m){tot+=gw(m)+(m.gapBefore?sp:0);});var x=(bw()-tot)/2,hh=M[0].el.offsetHeight,y=(bh()-hh)/2;
M.forEach(function(m,i){if(m.gapBefore)x+=sp;m.x=x-(m.el.offsetWidth-gw(m))/2;m.y=y+(i%2?2:-1);m.r=(i%3-1)*2;x+=gw(m);m.el.style.transitionDelay=reduce?'0s':(i*.05).toFixed(2)+'s';put(m);});}
function mix(){var placed=[];M.forEach(function(m,i){var ww=m.el.offsetWidth,hh=m.el.offsetHeight,best=null,bs=-1;for(var k=0;k<24;k++){var x=Math.random()*(bw()-ww),y=Math.random()*(bh()-hh),sc=1e9;placed.forEach(function(p){var dx=Math.max(0,Math.abs(x+ww/2-p[0])-(ww+p[2])/2),dy=Math.max(0,Math.abs(y+hh/2-p[1])-(hh+p[3])/2);sc=Math.min(sc,dx+dy);});if(sc>bs){bs=sc;best=[x,y];}if(sc>8)break;}m.x=best[0];m.y=best[1];placed.push([m.x+ww/2,m.y+hh/2,ww,hh]);m.r=Math.random()*50-25;m.el.style.transitionDelay=reduce?'0s':(i*.03).toFixed(2)+'s';put(m);});}
var drag=null;
board.addEventListener('pointerdown',function(e){var b=e.target.closest('.t7m__l');if(!b)return;var m=M.filter(function(q){return q.el===b;})[0];e.preventDefault();try{b.setPointerCapture(e.pointerId);}catch(_){}b.style.transitionDelay='0s';b.classList.add('is-drag');drag={m:m,sx:e.clientX,sy:e.clientY,ox:m.x,oy:m.y,id:e.pointerId};m.r=0;put(m);b.focus({preventScroll:true});});
board.addEventListener('pointermove',function(e){if(!drag||drag.id!==e.pointerId)return;var m=drag.m;m.x=drag.ox+e.clientX-drag.sx;m.y=drag.oy+e.clientY-drag.sy;clamp(m);put(m);});
function end(){if(!drag)return;var m=drag.m;m.el.classList.remove('is-drag');m.r=Math.random()*10-5;put(m);drag=null;}
board.addEventListener('pointerup',end);board.addEventListener('pointercancel',end);
board.addEventListener('keydown',function(e){var b=e.target.closest('.t7m__l');var d={ArrowLeft:[-12,0],ArrowRight:[12,0],ArrowUp:[0,-12],ArrowDown:[0,12]}[e.key];if(!b||!d)return;e.preventDefault();var m=M.filter(function(q){return q.el===b;})[0];m.el.style.transitionDelay='0s';m.x+=d[0];m.y+=d[1];clamp(m);put(m);});
w.querySelectorAll('.t7m__btn').forEach(function(b){b.addEventListener('click',function(){b.dataset.act==='mix'?mix():order();});});
function init(){mix();if(reduce){order();return;}if('IntersectionObserver' in window){var io=new IntersectionObserver(function(en){if(!en[0].isIntersecting)return;io.disconnect();setTimeout(order,700);},{threshold:.5});io.observe(w);}else order();}
M.forEach(function(m){m.el.style.transition='none';});
var go=function(){init();requestAnimationFrame(function(){requestAnimationFrame(function(){if(!reduce)M.forEach(function(m){m.el.style.transition='';});});});};
if(document.fonts&&document.fonts.ready)document.fonts.ready.then(go);else go();
}
init(document.querySelector('.jouw-container'));