body {
  background-color: black;
}

section {
  display: flex;
  width: 100vw;
  height: 100vh;
}
section h1 {
  margin: auto;
  position: relative;
  z-index: 1;
  font-family: sans-serif;
  font-size: 10vmin;
  font-weight: 700;
}
section h1:before, section h1:after {
  mix-blend-mode: screen;
}
section h1:before, section h1:after {
  content: attr(data-name);
  position: absolute;
  z-index: 2;
  top: 0;
  width: 100%;
  height: 100%;
}
section h1:before {
  left: -5%;
  color: #FF0000;
  clip: rect(0, 1350px, 140px, 0);
  -webkit-animation-name: glitchRed;
          animation-name: glitchRed;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
section h1:after {
  left: 5%;
  color: #0000FF;
  clip: rect(0, 1350px, 50px, 0);
  -webkit-animation-name: glitchBlue;
          animation-name: glitchBlue;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
section h1 span {
  position: relative;
  z-index: 1;
  color: white;
  clip: rect(0, 900px, 722px, 56px);
  -webkit-animation-name: glitchGreen;
          animation-name: glitchGreen;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes glitchRed {
  0% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  9% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  10% {
    left: 1%;
    -webkit-clip-path: inset(21% 0 5% 0);
            clip-path: inset(21% 0 5% 0);
  }
  19% {
    left: 1%;
    -webkit-clip-path: inset(21% 0 5% 0);
            clip-path: inset(21% 0 5% 0);
  }
  20% {
    left: 6%;
    -webkit-clip-path: inset(72% 0 55% 0);
            clip-path: inset(72% 0 55% 0);
  }
  29% {
    left: 6%;
    -webkit-clip-path: inset(72% 0 55% 0);
            clip-path: inset(72% 0 55% 0);
  }
  30% {
    left: 0;
    -webkit-clip-path: inset(12% 0 -52% 0);
            clip-path: inset(12% 0 -52% 0);
  }
  39% {
    left: 0;
    -webkit-clip-path: inset(12% 0 -52% 0);
            clip-path: inset(12% 0 -52% 0);
  }
  40% {
    left: -5%;
    -webkit-clip-path: inset(-80% 0 12% 0);
            clip-path: inset(-80% 0 12% 0);
  }
  49% {
    left: -5%;
    -webkit-clip-path: inset(-80% 0 12% 0);
            clip-path: inset(-80% 0 12% 0);
  }
  50% {
    left: 0;
    -webkit-clip-path: inset(95% 0 32% 0);
            clip-path: inset(95% 0 32% 0);
  }
  59% {
    left: 0;
    -webkit-clip-path: inset(95% 0 32% 0);
            clip-path: inset(95% 0 32% 0);
  }
  60% {
    left: 2%;
    -webkit-clip-path: inset(4% 0 27% 0);
            clip-path: inset(4% 0 27% 0);
  }
  69% {
    left: 2%;
    -webkit-clip-path: inset(4% 0 27% 0);
            clip-path: inset(4% 0 27% 0);
  }
  70% {
    left: 0;
    -webkit-clip-path: inset(-64% 0 -77% 0);
            clip-path: inset(-64% 0 -77% 0);
  }
  79% {
    left: 0;
    -webkit-clip-path: inset(-64% 0 -77% 0);
            clip-path: inset(-64% 0 -77% 0);
  }
  80% {
    left: -8%;
    -webkit-clip-path: inset(75% 0 -4% 0);
            clip-path: inset(75% 0 -4% 0);
  }
  89% {
    left: -8%;
    -webkit-clip-path: inset(75% 0 -4% 0);
            clip-path: inset(75% 0 -4% 0);
  }
  90% {
    left: 0;
    -webkit-clip-path: inset(-33% 0 96% 0);
            clip-path: inset(-33% 0 96% 0);
  }
  99% {
    left: 0;
    -webkit-clip-path: inset(-33% 0 96% 0);
            clip-path: inset(-33% 0 96% 0);
  }
  100% {
    left: 3%;
    -webkit-clip-path: inset(48% 0 50% 0);
            clip-path: inset(48% 0 50% 0);
  }
}

@keyframes glitchRed {
  0% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  9% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  10% {
    left: 1%;
    -webkit-clip-path: inset(21% 0 5% 0);
            clip-path: inset(21% 0 5% 0);
  }
  19% {
    left: 1%;
    -webkit-clip-path: inset(21% 0 5% 0);
            clip-path: inset(21% 0 5% 0);
  }
  20% {
    left: 6%;
    -webkit-clip-path: inset(72% 0 55% 0);
            clip-path: inset(72% 0 55% 0);
  }
  29% {
    left: 6%;
    -webkit-clip-path: inset(72% 0 55% 0);
            clip-path: inset(72% 0 55% 0);
  }
  30% {
    left: 0;
    -webkit-clip-path: inset(12% 0 -52% 0);
            clip-path: inset(12% 0 -52% 0);
  }
  39% {
    left: 0;
    -webkit-clip-path: inset(12% 0 -52% 0);
            clip-path: inset(12% 0 -52% 0);
  }
  40% {
    left: -5%;
    -webkit-clip-path: inset(-80% 0 12% 0);
            clip-path: inset(-80% 0 12% 0);
  }
  49% {
    left: -5%;
    -webkit-clip-path: inset(-80% 0 12% 0);
            clip-path: inset(-80% 0 12% 0);
  }
  50% {
    left: 0;
    -webkit-clip-path: inset(95% 0 32% 0);
            clip-path: inset(95% 0 32% 0);
  }
  59% {
    left: 0;
    -webkit-clip-path: inset(95% 0 32% 0);
            clip-path: inset(95% 0 32% 0);
  }
  60% {
    left: 2%;
    -webkit-clip-path: inset(4% 0 27% 0);
            clip-path: inset(4% 0 27% 0);
  }
  69% {
    left: 2%;
    -webkit-clip-path: inset(4% 0 27% 0);
            clip-path: inset(4% 0 27% 0);
  }
  70% {
    left: 0;
    -webkit-clip-path: inset(-64% 0 -77% 0);
            clip-path: inset(-64% 0 -77% 0);
  }
  79% {
    left: 0;
    -webkit-clip-path: inset(-64% 0 -77% 0);
            clip-path: inset(-64% 0 -77% 0);
  }
  80% {
    left: -8%;
    -webkit-clip-path: inset(75% 0 -4% 0);
            clip-path: inset(75% 0 -4% 0);
  }
  89% {
    left: -8%;
    -webkit-clip-path: inset(75% 0 -4% 0);
            clip-path: inset(75% 0 -4% 0);
  }
  90% {
    left: 0;
    -webkit-clip-path: inset(-33% 0 96% 0);
            clip-path: inset(-33% 0 96% 0);
  }
  99% {
    left: 0;
    -webkit-clip-path: inset(-33% 0 96% 0);
            clip-path: inset(-33% 0 96% 0);
  }
  100% {
    left: 3%;
    -webkit-clip-path: inset(48% 0 50% 0);
            clip-path: inset(48% 0 50% 0);
  }
}
@-webkit-keyframes glitchBlue {
  0% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  9% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  10% {
    left: -2%;
    -webkit-clip-path: inset(41% 0 -15% 0);
            clip-path: inset(41% 0 -15% 0);
  }
  19% {
    left: -2%;
    -webkit-clip-path: inset(41% 0 -15% 0);
            clip-path: inset(41% 0 -15% 0);
  }
  20% {
    left: -4%;
    -webkit-clip-path: inset(-72% 0 75% 0);
            clip-path: inset(-72% 0 75% 0);
  }
  29% {
    left: -4%;
    -webkit-clip-path: inset(-72% 0 75% 0);
            clip-path: inset(-72% 0 75% 0);
  }
  30% {
    left: 0;
    -webkit-clip-path: inset(62% 0 4% 0);
            clip-path: inset(62% 0 4% 0);
  }
  39% {
    left: 0;
    -webkit-clip-path: inset(62% 0 4% 0);
            clip-path: inset(62% 0 4% 0);
  }
  40% {
    left: 7%;
    -webkit-clip-path: inset(80% 0 -12% 0);
            clip-path: inset(80% 0 -12% 0);
  }
  49% {
    left: 7%;
    -webkit-clip-path: inset(80% 0 -12% 0);
            clip-path: inset(80% 0 -12% 0);
  }
  50% {
    left: 0;
    -webkit-clip-path: inset(5% 0 55% 0);
            clip-path: inset(5% 0 55% 0);
  }
  59% {
    left: 0;
    -webkit-clip-path: inset(5% 0 55% 0);
            clip-path: inset(5% 0 55% 0);
  }
  60% {
    left: -5%;
    -webkit-clip-path: inset(-47% 0 36% 0);
            clip-path: inset(-47% 0 36% 0);
  }
  69% {
    left: -5%;
    -webkit-clip-path: inset(-47% 0 36% 0);
            clip-path: inset(-47% 0 36% 0);
  }
  70% {
    left: 0;
    -webkit-clip-path: inset(24% 0 -7% 0);
            clip-path: inset(24% 0 -7% 0);
  }
  79% {
    left: 0;
    -webkit-clip-path: inset(24% 0 -7% 0);
            clip-path: inset(24% 0 -7% 0);
  }
  80% {
    left: 5%;
    -webkit-clip-path: inset(-75% 0 4% 0);
            clip-path: inset(-75% 0 4% 0);
  }
  89% {
    left: 5%;
    -webkit-clip-path: inset(-75% 0 4% 0);
            clip-path: inset(-75% 0 4% 0);
  }
  90% {
    left: 0;
    -webkit-clip-path: inset(3% 0 -96% 0);
            clip-path: inset(3% 0 -96% 0);
  }
  99% {
    left: 0;
    -webkit-clip-path: inset(3% 0 -96% 0);
            clip-path: inset(3% 0 -96% 0);
  }
  100% {
    left: -3%;
    -webkit-clip-path: inset(98% 0 -50% 0);
            clip-path: inset(98% 0 -50% 0);
  }
}
@keyframes glitchBlue {
  0% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  9% {
    left: 0;
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  10% {
    left: -2%;
    -webkit-clip-path: inset(41% 0 -15% 0);
            clip-path: inset(41% 0 -15% 0);
  }
  19% {
    left: -2%;
    -webkit-clip-path: inset(41% 0 -15% 0);
            clip-path: inset(41% 0 -15% 0);
  }
  20% {
    left: -4%;
    -webkit-clip-path: inset(-72% 0 75% 0);
            clip-path: inset(-72% 0 75% 0);
  }
  29% {
    left: -4%;
    -webkit-clip-path: inset(-72% 0 75% 0);
            clip-path: inset(-72% 0 75% 0);
  }
  30% {
    left: 0;
    -webkit-clip-path: inset(62% 0 4% 0);
            clip-path: inset(62% 0 4% 0);
  }
  39% {
    left: 0;
    -webkit-clip-path: inset(62% 0 4% 0);
            clip-path: inset(62% 0 4% 0);
  }
  40% {
    left: 7%;
    -webkit-clip-path: inset(80% 0 -12% 0);
            clip-path: inset(80% 0 -12% 0);
  }
  49% {
    left: 7%;
    -webkit-clip-path: inset(80% 0 -12% 0);
            clip-path: inset(80% 0 -12% 0);
  }
  50% {
    left: 0;
    -webkit-clip-path: inset(5% 0 55% 0);
            clip-path: inset(5% 0 55% 0);
  }
  59% {
    left: 0;
    -webkit-clip-path: inset(5% 0 55% 0);
            clip-path: inset(5% 0 55% 0);
  }
  60% {
    left: -5%;
    -webkit-clip-path: inset(-47% 0 36% 0);
            clip-path: inset(-47% 0 36% 0);
  }
  69% {
    left: -5%;
    -webkit-clip-path: inset(-47% 0 36% 0);
            clip-path: inset(-47% 0 36% 0);
  }
  70% {
    left: 0;
    -webkit-clip-path: inset(24% 0 -7% 0);
            clip-path: inset(24% 0 -7% 0);
  }
  79% {
    left: 0;
    -webkit-clip-path: inset(24% 0 -7% 0);
            clip-path: inset(24% 0 -7% 0);
  }
  80% {
    left: 5%;
    -webkit-clip-path: inset(-75% 0 4% 0);
            clip-path: inset(-75% 0 4% 0);
  }
  89% {
    left: 5%;
    -webkit-clip-path: inset(-75% 0 4% 0);
            clip-path: inset(-75% 0 4% 0);
  }
  90% {
    left: 0;
    -webkit-clip-path: inset(3% 0 -96% 0);
            clip-path: inset(3% 0 -96% 0);
  }
  99% {
    left: 0;
    -webkit-clip-path: inset(3% 0 -96% 0);
            clip-path: inset(3% 0 -96% 0);
  }
  100% {
    left: -3%;
    -webkit-clip-path: inset(98% 0 -50% 0);
            clip-path: inset(98% 0 -50% 0);
  }
}
@-webkit-keyframes glitchGreen {
  0% {
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  9% {
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  10% {
    -webkit-clip-path: inset(41% 0 -15% 0);
            clip-path: inset(41% 0 -15% 0);
  }
  19% {
    -webkit-clip-path: inset(41% 0 -15% 0);
            clip-path: inset(41% 0 -15% 0);
  }
  20% {
    -webkit-clip-path: inset(-72% 0 75% 0);
            clip-path: inset(-72% 0 75% 0);
  }
  29% {
    -webkit-clip-path: inset(-72% 0 75% 0);
            clip-path: inset(-72% 0 75% 0);
  }
  30% {
    -webkit-clip-path: inset(62% 0 4% 0);
            clip-path: inset(62% 0 4% 0);
  }
  39% {
    -webkit-clip-path: inset(62% 0 4% 0);
            clip-path: inset(62% 0 4% 0);
  }
  40% {
    -webkit-clip-path: inset(80% 0 -12% 0);
            clip-path: inset(80% 0 -12% 0);
  }
  49% {
    -webkit-clip-path: inset(80% 0 -12% 0);
            clip-path: inset(80% 0 -12% 0);
  }
  50% {
    -webkit-clip-path: inset(5% 0 55% 0);
            clip-path: inset(5% 0 55% 0);
  }
  59% {
    -webkit-clip-path: inset(5% 0 55% 0);
            clip-path: inset(5% 0 55% 0);
  }
  60% {
    -webkit-clip-path: inset(-47% 0 36% 0);
            clip-path: inset(-47% 0 36% 0);
  }
  69% {
    -webkit-clip-path: inset(-47% 0 36% 0);
            clip-path: inset(-47% 0 36% 0);
  }
  70% {
    -webkit-clip-path: inset(24% 0 -7% 0);
            clip-path: inset(24% 0 -7% 0);
  }
  79% {
    -webkit-clip-path: inset(24% 0 -7% 0);
            clip-path: inset(24% 0 -7% 0);
  }
  80% {
    -webkit-clip-path: inset(-75% 0 4% 0);
            clip-path: inset(-75% 0 4% 0);
  }
  89% {
    -webkit-clip-path: inset(-75% 0 4% 0);
            clip-path: inset(-75% 0 4% 0);
  }
  90% {
    -webkit-clip-path: inset(3% 0 -96% 0);
            clip-path: inset(3% 0 -96% 0);
  }
  99% {
    -webkit-clip-path: inset(3% 0 -96% 0);
            clip-path: inset(3% 0 -96% 0);
  }
  100% {
    -webkit-clip-path: inset(98% 0 -50% 0);
            clip-path: inset(98% 0 -50% 0);
  }
}
@keyframes glitchGreen {
  0% {
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  9% {
    -webkit-clip-path: inset(0% 0 0% 0);
            clip-path: inset(0% 0 0% 0);
  }
  10% {
    -webkit-clip-path: inset(41% 0 -15% 0);
            clip-path: inset(41% 0 -15% 0);
  }
  19% {
    -webkit-clip-path: inset(41% 0 -15% 0);
            clip-path: inset(41% 0 -15% 0);
  }
  20% {
    -webkit-clip-path: inset(-72% 0 75% 0);
            clip-path: inset(-72% 0 75% 0);
  }
  29% {
    -webkit-clip-path: inset(-72% 0 75% 0);
            clip-path: inset(-72% 0 75% 0);
  }
  30% {
    -webkit-clip-path: inset(62% 0 4% 0);
            clip-path: inset(62% 0 4% 0);
  }
  39% {
    -webkit-clip-path: inset(62% 0 4% 0);
            clip-path: inset(62% 0 4% 0);
  }
  40% {
    -webkit-clip-path: inset(80% 0 -12% 0);
            clip-path: inset(80% 0 -12% 0);
  }
  49% {
    -webkit-clip-path: inset(80% 0 -12% 0);
            clip-path: inset(80% 0 -12% 0);
  }
  50% {
    -webkit-clip-path: inset(5% 0 55% 0);
            clip-path: inset(5% 0 55% 0);
  }
  59% {
    -webkit-clip-path: inset(5% 0 55% 0);
            clip-path: inset(5% 0 55% 0);
  }
  60% {
    -webkit-clip-path: inset(-47% 0 36% 0);
            clip-path: inset(-47% 0 36% 0);
  }
  69% {
    -webkit-clip-path: inset(-47% 0 36% 0);
            clip-path: inset(-47% 0 36% 0);
  }
  70% {
    -webkit-clip-path: inset(24% 0 -7% 0);
            clip-path: inset(24% 0 -7% 0);
  }
  79% {
    -webkit-clip-path: inset(24% 0 -7% 0);
            clip-path: inset(24% 0 -7% 0);
  }
  80% {
    -webkit-clip-path: inset(-75% 0 4% 0);
            clip-path: inset(-75% 0 4% 0);
  }
  89% {
    -webkit-clip-path: inset(-75% 0 4% 0);
            clip-path: inset(-75% 0 4% 0);
  }
  90% {
    -webkit-clip-path: inset(3% 0 -96% 0);
            clip-path: inset(3% 0 -96% 0);
  }
  99% {
    -webkit-clip-path: inset(3% 0 -96% 0);
            clip-path: inset(3% 0 -96% 0);
  }
  100% {
    -webkit-clip-path: inset(98% 0 -50% 0);
            clip-path: inset(98% 0 -50% 0);
  }
}