Glitch Text Effect

.glitch-text {
  position: relative;
  font-size: 48px;
  font-weight: 900;
  color: white;
  letter-spacing: 3px;
  animation: glitch-skew 1s infinite;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 #ff00de;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim 2s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00de;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(61px, 9999px, 88px, 0); }
  5% { clip: rect(33px, 9999px, 61px, 0); }
  10% { clip: rect(69px, 9999px, 20px, 0); }
  15% { clip: rect(98px, 9999px, 53px, 0); }
  20% { clip: rect(27px, 9999px, 96px, 0); }
  25% { clip: rect(52px, 9999px, 61px, 0); }
  30% { clip: rect(91px, 9999px, 62px, 0); }
  35% { clip: rect(44px, 9999px, 17px, 0); }
  40% { clip: rect(49px, 9999px, 100px, 0); }
  45% { clip: rect(58px, 9999px, 82px, 0); }
  50% { clip: rect(13px, 9999px, 23px, 0); }
  55% { clip: rect(99px, 9999px, 51px, 0); }
  60% { clip: rect(76px, 9999px, 77px, 0); }
  65% { clip: rect(34px, 9999px, 94px, 0); }
  70% { clip: rect(12px, 9999px, 85px, 0); }
  75% { clip: rect(18px, 9999px, 96px, 0); }
  80% { clip: rect(54px, 9999px, 36px, 0); }
  85% { clip: rect(79px, 9999px, 68px, 0); }
  90% { clip: rect(63px, 9999px, 42px, 0); }
  95% { clip: rect(29px, 9999px, 87px, 0); }
  100% { clip: rect(46px, 9999px, 15px, 0); }
}

@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  10% { transform: skew(-2deg); }
  20% { transform: skew(2deg); }
  30% { transform: skew(0deg); }
  100% { transform: skew(0deg); }
}