Letters uit blur, willekeurige volgorde Nieuw

<!-- Letters uit blur, willekeurige volgorde · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lub"><p class="lub__k">[ Meubelmakerij Okkerse · Gouda ]</p>
<h4 class="lub__h">Vakmanschap zie je aan de naden.</h4>
<p class="lub__s">Tafels en kasten uit massief eiken, gemaakt in onze werkplaats aan de Turfmarkt. Levertijd acht weken.</p>
<button class="lub__opn" type="button">Opnieuw</button></div>
</div>

/* Letters uit blur, willekeurige volgorde · NedDev · eigen werk. */
/* fonts (Fontshare): clash-display@500,600 */
.lub{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:18px 22px;box-sizing:border-box;background:#ece6dc;color:#231d16;font-family:'Switzer',system-ui,sans-serif;container-type:size}
.lub__k{margin:0;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6d6252}
.lub__h{margin:0;font:600 clamp(24px,9cqi,64px)/1.0 'Clash Display','Switzer',sans-serif;letter-spacing:-.02em;max-width:14ch}
.lub__w{display:inline-block;white-space:nowrap}
.lub__c{display:inline-block}
.lub__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lub.is-klaar .lub__c{opacity:0;filter:blur(12px);transform:translateY(.08em) scale(1.06)}
.lub.is-klaar.is-in .lub__c{opacity:1;filter:blur(0);transform:none;transition:opacity .55s ease-out var(--d),filter .7s cubic-bezier(.2,.7,.2,1) var(--d),transform .7s cubic-bezier(.2,.7,.2,1) var(--d)}
.lub__s{margin:0;font-size:clamp(11.5px,3.2cqi,16px);line-height:1.5;color:#4a4034;max-width:44ch;transition:opacity .5s .9s}
.lub.is-klaar .lub__s{opacity:0}.lub.is-klaar.is-in .lub__s{opacity:1}
.lub__opn{position:absolute;right:12px;bottom:12px;font:600 11px/1 'Switzer',sans-serif;padding:7px 11px;border-radius:999px;border:1px solid #231d16;background:transparent;color:#231d16;cursor:pointer;transition:background .18s,color .18s}
.lub__opn:hover{background:#231d16;color:#ece6dc}
.lub__opn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.lub__opn:disabled{opacity:.35;cursor:default}
@media (prefers-reduced-motion: reduce){.lub.is-klaar .lub__c,.lub.is-klaar .lub__s{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}}

// Letters uit blur, willekeurige volgorde · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.lub')||root;
var h=root.querySelector('.lub__h'),opn=root.querySelector('.lub__opn'),rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
if(rm){opn.disabled=true;return;}
var zin=h.textContent,cs=[];h.textContent='';var sr=document.createElement('span');sr.className='lub__sr';sr.textContent=zin;h.appendChild(sr);
var vis=document.createElement('span');vis.setAttribute('aria-hidden','true');h.appendChild(vis);
zin.split(' ').forEach(function(w,wi){if(wi)vis.appendChild(document.createTextNode(' '));var ws=document.createElement('span');ws.className='lub__w';
  w.split('').forEach(function(ch){var c=document.createElement('span');c.className='lub__c';c.textContent=ch;ws.appendChild(c);cs.push(c);});vis.appendChild(ws);});
function schud(){var o=cs.map(function(_,i){return i;});for(var i=o.length-1;i>0;i--){var j=Math.floor(Math.random()*(i+1)),t=o[i];o[i]=o[j];o[j]=t;}
  var stap=Math.min(32,800/cs.length);o.forEach(function(ci,rang){cs[ci].style.setProperty('--d',Math.round(rang*stap+Math.random()*60)+'ms');});}
function speel(){schud();root.classList.remove('is-in');void root.offsetWidth;requestAnimationFrame(function(){root.classList.add('is-in');});}
root.classList.add('is-klaar');schud();
opn.addEventListener('click',speel);
if('IntersectionObserver' in window){var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){root.classList.add('is-in');io.disconnect();}});},{threshold:.5});io.observe(h);}else root.classList.add('is-in');
}
init(document.querySelector('.jouw-container'));