@keyframes glitch {
  0% { text-shadow: 5px 0 #ff0000, -5px 0 #00ffff; }
  25% { text-shadow: -5px 0 #ff0000, 5px 0 #00ffff; }
  50% { text-shadow: 2.5px 5px #ff0000, -2.5px -5px #00ffff; }
  75% { text-shadow: -5px -2.5px #ff0000, 5px 2.5px #00ffff; }
  100% { text-shadow: 5px 0 #ff0000, -5px 0 #00ffff; }
}

.glitch-text {
  font-size: 3rem;
  font-weight: 900;
  color: white;
  animation: glitch 0.3s infinite;
  position: relative;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.glitch-text::before {
  color: #ff0000;
  animation: glitch 0.3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-5px, -2.5px);
}
.glitch-text::after {
  color: #00ffff;
  animation: glitch 0.3s infinite reverse;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  transform: translate(5px, 2.5px);
}