Glitch Hero Text

<!-- Glitch Hero Text · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="gh-wrap"><h2 class="gh-text" data-text="SIGNAL//LOST">SIGNAL//LOST</h2><p class="gh-sub">transmission interrupted</p></div>
</div>

/* Glitch Hero Text · NedDev · eigen werk. */
.gh-stage{position:relative;width:100%;height:100%;background:#0a0a0a;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gh-wrap{text-align:center}.gh-text{position:relative;margin:0;font:800 clamp(32px,8vw,76px)/1 'JetBrains Mono',monospace;letter-spacing:-.02em;color:#fff;text-transform:uppercase}
.gh-text::before,.gh-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;background:transparent;mix-blend-mode:screen}
.gh-text::before{color:#F5480F;animation:gh-a 1.4s infinite linear alternate-reverse;transform:translate(2px,0)}.gh-text::after{color:#27d3e0;animation:gh-b 1.7s infinite linear alternate-reverse;transform:translate(-2px,0)}
@keyframes gh-a{0%{clip-path:inset(8% 0 86% 0);transform:translate(-2px,0)}20%{clip-path:inset(40% 0 38% 0);transform:translate(2px,0)}40%{clip-path:inset(70% 0 12% 0);transform:translate(-3px,0)}60%{clip-path:inset(24% 0 60% 0);transform:translate(3px,0)}80%{clip-path:inset(55% 0 28% 0);transform:translate(-2px,0)}100%{clip-path:inset(12% 0 80% 0);transform:translate(2px,0)}}
@keyframes gh-b{0%{clip-path:inset(60% 0 22% 0);transform:translate(2px,0)}25%{clip-path:inset(12% 0 70% 0);transform:translate(-3px,0)}50%{clip-path:inset(78% 0 6% 0);transform:translate(2px,0)}75%{clip-path:inset(35% 0 45% 0);transform:translate(-2px,0)}100%{clip-path:inset(50% 0 30% 0);transform:translate(3px,0)}}
.gh-sub{margin:.9em 0 0;font:500 13px/1 'JetBrains Mono',monospace;letter-spacing:.5em;text-transform:uppercase;color:#888}
.gh-wrap.is-hot .gh-text::before{animation-duration:.35s}.gh-wrap.is-hot .gh-text::after{animation-duration:.3s}
@media(prefers-reduced-motion:reduce){.gh-text::before,.gh-text::after{animation:none;clip-path:inset(0 0 100% 0)}}

// Glitch Hero Text · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root.classList.add('gh-stage');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;var wrap=root.querySelector('.gh-wrap');if(reduce)return;
root.addEventListener('pointerenter',function(){wrap.classList.add('is-hot');});root.addEventListener('pointerleave',function(){wrap.classList.remove('is-hot');});
var timer;function burst(){wrap.classList.add('is-hot');setTimeout(function(){if(!root.matches(':hover'))wrap.classList.remove('is-hot');},260);timer=setTimeout(burst,1800+Math.random()*2600);}
new IntersectionObserver(function(es){if(es[0].isIntersecting)burst();else clearTimeout(timer);}).observe(root);
}
init(document.querySelector('.jouw-container'));