Letters uit blur, willekeurige volgorde New

Headline whose letters come out of a soft blur in random order, once, when half of it is in view (IntersectionObserver). Words never break, screen readers get the whole sentence at once (letters are aria-hidden), and without JS or with prefers-reduced-motion the headline simply shows. Total about 1 second, with a "Replay" button.

[ Meubelmakerij Okkerse · Gouda ]

Vakmanschap zie je aan de naden.

Tafels en kasten uit massief eiken, gemaakt in onze werkplaats aan de Turfmarkt. Levertijd acht weken.

How to use it

Paste the HTML where the text animations should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- 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'));

More text animations

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →