JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

CSS

.glitchWrapper-209Ebg {
  height: 150px;
  padding: 20px 0;
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2
}

.glitch-1ZnYvx {
  font-family: ArchivoBlack,Whitney,Helvetica Neue,Helvetica,Arial,sans-serif;
  font-weight: 700;
  color: rgba(hsl(240,5.9%,96.7%),.3);
  font-size: 150px;
  position: relative;
  display: inline-block
}

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

.glitch-1ZnYvx:before {
  left: 2px;
  text-shadow: -2px 0 hsl(236,83.3%,92.9%);
  text-shadow: -2px 0 hsl(236,calc(var(--saturation-factor, 1)*83.3%),92.9%);
  clip: rect(24px,550px,90px,0);
  -webkit-animation: glitch-anim-2-3Jj1Wz 4s linear infinite alternate-reverse;
  animation: glitch-anim-2-3Jj1Wz 4s linear infinite alternate-reverse
}

@media (prefers-reduced-motion) {
  .glitch-1ZnYvx:before {
    -webkit-animation: none;
    animation: none
  }
}

.glitch-1ZnYvx:after {
  left: -2px;
  text-shadow: -2px 0 rgba(hsl(235,85.6%,64.7%),.3);
  text-shadow: -2px 0 rgba(hsl(235,calc(var(--saturation-factor, 1)*85.6%),64.7%),.3);
  clip: rect(85px,550px,140px,0);
  -webkit-animation: glitch-anim-n2MEks 2s linear infinite alternate-reverse;
  animation: glitch-anim-n2MEks 2s linear infinite alternate-reverse
}

@media (prefers-reduced-motion) {
  .glitch-1ZnYvx:after {
    -webkit-animation: none;
    animation: none
  }
}

@-webkit-keyframes glitch-anim-n2MEks {
  0% {
    clip: rect(3px,9999px,86px,0)
  }

  6.66666667% {
    clip: rect(27px,9999px,128px,0)
  }

  13.33333333% {
    clip: rect(35px,9999px,71px,0)
  }

  20% {
    clip: rect(10px,9999px,134px,0)
  }

  26.66666667% {
    clip: rect(23px,9999px,145px,0)
  }

  33.33333333% {
    clip: rect(40px,9999px,80px,0)
  }

  40% {
    clip: rect(33px,9999px,153px,0)
  }

  46.66666667% {
    clip: rect(50px,9999px,84px,0)
  }

  53.33333333% {
    clip: rect(57px,9999px,188px,0)
  }

  60% {
...