Letters vallen om als dominostenen Nieuw

<!-- Letters vallen om als dominostenen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="t7d">
<div class="t7d__row" aria-hidden="true" data-text="omgevallen"></div>
<h3 class="t7d__h">Deze pagina is omgevallen</h3>
<p class="t7d__p">Fout 404: deze link werkt niet meer, de rest van de site staat nog overeind.</p>
<div class="t7d__acts"><button class="t7d__btn" type="button">Duw de eerste om</button><a class="t7d__a" href="#letters-domino">Naar de homepage</a></div>
</div>
</div>

/* Letters vallen om als dominostenen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.t7d{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px 22px;container-type:size;font-family:'Switzer',sans-serif;box-sizing:border-box}
.t7d__row{display:flex;align-items:flex-end;gap:2.6cqi;height:15cqi;padding-right:13cqi;border-bottom:2px solid #0a0a0a;cursor:pointer}
.t7d__t{flex:none;display:flex;align-items:center;justify-content:center;width:5.8cqi;min-width:20px;height:13.5cqi;min-height:44px;box-sizing:border-box;border:1.5px solid #0a0a0a;border-radius:4px;background:#fff;font-weight:800;font-size:max(14px,5cqi);line-height:1;color:#0a0a0a;transform-origin:100% 100%;transition:transform .26s cubic-bezier(.55,0,.8,1.2)}
.t7d__t:nth-child(5){background:#F5480F}
.t7d__h{margin:6px 0 0;font-weight:800;font-size:clamp(18px,5.6cqi,28px);line-height:1.1;letter-spacing:-.02em;color:#0a0a0a}
.t7d__p{margin:0;font-size:clamp(12px,3.2cqi,14px);line-height:1.4;color:#3a3a3a}
.t7d__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.t7d__btn{min-height:32px;padding:7px 12px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px/1.2 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s}
.t7d__btn:hover{background:#F5480F;color:#0a0a0a}
.t7d__btn:focus-visible,.t7d__a:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.t7d__a{font-size:13px;font-weight:600;color:#0a0a0a;text-decoration:underline;text-decoration-color:#F5480F;text-decoration-thickness:2px;text-underline-offset:3px;padding:4px 0}

// Letters vallen om als dominostenen · © 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('.t7d'),row=w.querySelector('.t7d__row'),btn=w.querySelector('.t7d__btn'),txt=row.dataset.text||'omgevallen';
var T=txt.split('').map(function(ch){var s=document.createElement('span');s.className='t7d__t';s.textContent=ch;row.appendChild(s);return s;});
var down=false,busy=false,reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function angles(){var a=[];for(var i=0;i<T.length;i++){var r=T[i].getBoundingClientRect(),n=T[i+1]?T[i+1].getBoundingClientRect():null;if(!n){a.push(90);break;}var gap=n.left-r.right,hh=r.height;a.push(Math.min(70,Math.asin(Math.min(.95,(gap*1.35+i*.6)/hh))*180/Math.PI));}return a;}
function topple(){if(busy)return;busy=true;var a=angles(),d=0,step=170;T.forEach(function(s,i){s.style.transitionDelay=reduce?'0s':(d/1000).toFixed(3)+'s';s.style.transform='rotate('+a[i].toFixed(1)+'deg)';d+=step;step*=.86;});
down=true;btn.textContent='Zet ze weer rechtop';setTimeout(function(){busy=false;},reduce?0:d+300);}
function stand(){if(busy)return;busy=true;var d=0;for(var i=T.length-1;i>=0;i--){T[i].style.transitionDelay=reduce?'0s':(d/1000).toFixed(3)+'s';T[i].style.transform='';d+=70;}down=false;btn.textContent='Duw de eerste om';setTimeout(function(){busy=false;},reduce?0:d+300);}
if(reduce)T.forEach(function(s){s.style.transition='none';});
function toggle(){down?stand():topple();}
btn.addEventListener('click',toggle);row.addEventListener('click',toggle);
}
init(document.querySelector('.jouw-container'));