Focuskader

<!-- Focuskader · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-tf"><div class="ei-tf__row"><span class="ei-tf__w">Helder</span><span class="ei-tf__w">Snel</span><span class="ei-tf__w">Vindbaar</span><span class="ei-tf__f" aria-hidden="true"><i></i><i></i><i></i><i></i></span></div></div>
</div>

/* Focuskader · NedDev · eigen werk. */
.ei-tf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ei-tf__row{position:relative;display:flex;gap:clamp(12px,3vw,26px)}
.ei-tf__w{font-family:'Switzer',sans-serif;font-weight:800;font-size:clamp(22px,4.6vw,34px);letter-spacing:-.03em;color:#0a0a0a;filter:blur(4px);opacity:.45;transition:filter .45s,opacity .45s;cursor:default;padding:2px 4px}
.ei-tf__w.is-on{filter:none;opacity:1}
.ei-tf__f{position:absolute;top:0;left:0;pointer-events:none;transition:transform .45s cubic-bezier(.6,0,.2,1),width .45s cubic-bezier(.6,0,.2,1),height .45s}
.ei-tf__f i{position:absolute;width:10px;height:10px;border:2.5px solid #F5480F}
.ei-tf__f i:nth-child(1){top:-8px;left:-8px;border-right:0;border-bottom:0}
.ei-tf__f i:nth-child(2){top:-8px;right:-8px;border-left:0;border-bottom:0}
.ei-tf__f i:nth-child(3){bottom:-8px;left:-8px;border-right:0;border-top:0}
.ei-tf__f i:nth-child(4){bottom:-8px;right:-8px;border-left:0;border-top:0}
@media(prefers-reduced-motion:reduce){.ei-tf__w,.ei-tf__f{transition:none}}

// Focuskader · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-tf'),ws=[].slice.call(w.querySelectorAll('.ei-tf__w')),f=w.querySelector('.ei-tf__f'),i=0,hover=false;
function set(n){i=n;ws.forEach(function(x,k){x.classList.toggle('is-on',k===n);});var el=ws[n];f.style.transform='translate('+el.offsetLeft+'px,'+el.offsetTop+'px)';f.style.width=el.offsetWidth+'px';f.style.height=el.offsetHeight+'px';}
set(0);if(document.fonts&&document.fonts.ready)document.fonts.ready.then(function(){set(i);});
ws.forEach(function(x,k){x.addEventListener('mouseenter',function(){hover=true;set(k);});x.addEventListener('mouseleave',function(){hover=false;});});
if(!matchMedia('(prefers-reduced-motion: reduce)').matches)setInterval(function(){if(!hover)set((i+1)%ws.length);},1700);
window.addEventListener('resize',function(){set(i);});
}
init(document.querySelector('.jouw-container'));