Glitch Text

.glitch {
  position: relative;
  font-weight: 900;
  color: #fff;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
}

.glitch::before {
  color: #0ff;
  animation: glitch-1 2s infinite linear alternate;
}

.glitch::after {
  color: #f00;
  animation: glitch-2 3s infinite linear alternate;
}

/* Usage */
<span className="glitch" data-text="GLITCH">GLITCH</span>

@keyframes glitch-1 {
  0% { clip-path: inset(40% 0 60% 0); transform: translate(-2px, 0); }
  20% { clip-path: inset(10% 0 85% 0); transform: translate(2px, 0); }
  40% { clip-path: inset(70% 0 5% 0); transform: translate(-1px, 0); }
  60% { clip-path: inset(30% 0 50% 0); transform: translate(3px, 0); }
  80% { clip-path: inset(80% 0 10% 0); transform: translate(-2px, 0); }
  100% { clip-path: inset(5% 0 90% 0); transform: translate(1px, 0); }
}
@keyframes glitch-2 {
  0% { clip-path: inset(20% 0 70% 0); transform: translate(2px, 0); }
  20% { clip-path: inset(60% 0 30% 0); transform: translate(-3px, 0); }
  40% { clip-path: inset(5% 0 80% 0); transform: translate(1px, 0); }
  60% { clip-path: inset(50% 0 40% 0); transform: translate(-2px, 0); }
  80% { clip-path: inset(15% 0 75% 0); transform: translate(3px, 0); }
  100% { clip-path: inset(70% 0 20% 0); transform: translate(-1px, 0); }
}