글리치

<div class="g" id="g" data-text="GLITCH">GLITCH</div>

.g{position:relative;font-size:clamp(32px,8vmin,46px);font-weight:800;color:#fff;letter-spacing:.04em}
.g::before,.g::after{content:attr(data-text);position:absolute;inset:0;mix-blend-mode:screen;opacity:0}
.g::before{color:#ff2d55}
.g::after{color:#22d3ee}
.g.burst::before{opacity:1;animation:gb .32s steps(6) 1}
.g.burst::after{opacity:1;animation:gb2 .32s steps(6) 1}
@keyframes gb{
  0%{clip-path:inset(10% 0 70% 0);transform:translate(-6px,0)}
  30%{clip-path:inset(60% 0 10% 0);transform:translate(5px,0)}
  60%{clip-path:inset(20% 0 50% 0);transform:translate(-3px,0)}
  100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}}
@keyframes gb2{
  0%{clip-path:inset(70% 0 5% 0);transform:translate(6px,0)}
  40%{clip-path:inset(5% 0 60% 0);transform:translate(-4px,0)}
  100%{clip-path:inset(0 0 0 0);transform:translate(0,0)}}

const g = document.getElementById('g');
function burst() {
  g.classList.add('burst');
  setTimeout(() => g.classList.remove('burst'), 320);
  setTimeout(burst, 1600 + Math.random() * 1400);
}
burst();