Glitch Text

<style>
  @keyframes glitch-1 {
    0%, 100% { clip-path: inset(0 0 85% 0); transform: translate(0, 0); }
    20% { clip-path: inset(20% 0 40% 0); transform: translate(-2px, -1px); }
    40% { clip-path: inset(60% 0 10% 0); transform: translate(2px, 1px); }
    60% { clip-path: inset(10% 0 60% 0); transform: translate(-1px, 1px); }
    80% { clip-path: inset(40% 0 30% 0); transform: translate(1px, -1px); }
  }
  @keyframes glitch-2 {
    0%, 100% { clip-path: inset(80% 0 5% 0); transform: translate(0, 0); }
    25% { clip-path: inset(10% 0 70% 0); transform: translate(2px, 1px); }
    50% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, -1px); }
    75% { clip-path: inset(30% 0 45% 0); transform: translate(1px, 1px); }
  }
  .glitch-a { animation: glitch-1 2.4s infinite linear alternate; }
  .glitch-b { animation: glitch-2 2.8s infinite linear alternate; }
  @media (prefers-reduced-motion: reduce) { .glitch-a, .glitch-b { animation: none; opacity: 0; } }
</style>

<span class="relative inline-block text-3xl font-bold text-gray-900 dark:text-gray-100">
  <span class="relative z-10">SYSTEM ERROR</span>
  <span class="glitch-a absolute left-0 top-0 z-0 text-cyan-400" aria-hidden="true">SYSTEM ERROR</span>
  <span class="glitch-b absolute left-0 top-0 z-0 text-fuchsia-500" aria-hidden="true">SYSTEM ERROR</span>
</span>