Глитч-текст

<h1 class="glitch" data-text="ЗАГОЛОВОК">ЗАГОЛОВОК</h1>

<style>
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);          /* две копии текста */
  position: absolute; inset: 0; opacity: 0; }
.glitch::before { color: #E84B16;
  animation: g1 2.4s steps(2) infinite; }
.glitch::after { color: #2fd0ff;
  animation: g2 2.9s steps(2) infinite; }
/* вспышка глитча в конце цикла: срезы clip-path + сдвиги */
@keyframes g1 {
  0%, 86% { transform: none; opacity: 0; }
  87% { transform: translate(-6px, 2px); opacity: 1;
        clip-path: inset(12% 0 70% 0); }
  90% { transform: translate(5px, -1px); clip-path: inset(48% 0 30% 0); }
  93% { transform: translate(-3px, 1px); clip-path: inset(70% 0 8% 0); }
  96%, 100% { transform: none; opacity: 0; } }
@keyframes g2 { /* то же с другими фазами и срезами */
  0%, 88% { opacity: 0; } 89% { opacity: 1; transform: translate(6px,-2px);
  clip-path: inset(55% 0 25% 0); } 98%, 100% { opacity: 0; } }
</style>

Сделай глитч-текст на чистом CSS: две копии текста через ::before/::after с content:attr(data-text), поверх оригинала. Обе почти всё время невидимы (opacity 0); в конце цикла (86-96% keyframes) короткая вспышка: цветные копии (красная и голубая) сдвигаются на ±3-6px и режутся горизонтальными полосами clip-path: inset(X% 0 Y% 0), меняя срезы каждые 3% таймлайна, steps(2) для резкости. Разные длительности циклов (2.4s/2.9s), чтобы вспышки не совпадали. При prefers-reduced-motion отключить.