Woorden uit de blur

<!-- Woorden uit de blur · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-blr"><p class="ei-blr__p">Een website die klanten oplevert, niet alleen bezoekers.</p><span class="ei-blr__src">Studio Verbeek, Utrecht</span></div>
</div>

/* Woorden uit de blur · NedDev · eigen werk. */
.ei-blr{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 30px;box-sizing:border-box;cursor:pointer}
.ei-blr__p{margin:0 0 14px;font-family:'Switzer',sans-serif;font-weight:600;font-size:clamp(20px,3.4vw,26px);line-height:1.22;letter-spacing:-.015em;color:#0a0a0a;max-width:17ch}
.ei-blr__wd{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(10px);transition:opacity .7s ease,filter .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.ei-blr.is-in .ei-blr__wd{opacity:1;filter:blur(0);transform:none}
.ei-blr__wd--acc{color:#F5480F}
.ei-blr__src{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(10,10,10,.5)}
@media(prefers-reduced-motion:reduce){.ei-blr__wd{transition:none;opacity:1;filter:none;transform:none}}

// Woorden uit de blur · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-blr'),p=w.querySelector('.ei-blr__p');
var words=p.textContent.trim().split(' ');p.textContent='';
words.forEach(function(t,i){var s=document.createElement('span');s.className='ei-blr__wd'+(t==='klanten'?' ei-blr__wd--acc':'');s.textContent=t;s.style.transitionDelay=(i*0.09)+'s';p.appendChild(s);if(i<words.length-1)p.appendChild(document.createTextNode(' '));});
function show(){w.classList.add('is-in');}
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){show();io.disconnect();}});},{threshold:.4});io.observe(w);
w.addEventListener('click',function(){w.classList.remove('is-in');void w.offsetWidth;setTimeout(show,60);});
}
init(document.querySelector('.jouw-container'));