nelle-observer/frontend/public/styles/css/glitch.css

.glitch {
  text-shadow:
    0.05em 0 0 var(--glitch-1),
    -0.03em -0.04em 0 var(--glitch-2),
    0.025em 0.04em 0 var(--glitch-3);
  animation: glitch 742ms infinite;
  color: var(--alt-accent-900);
  background-color: rgba(0, 0, 0, 0.233);
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

.glitch-alt {
  text-shadow:
    0.05em 0 0 var(--glitch-1),
    -0.03em -0.04em 0 var(--glitch-2),
    0.025em 0.04em 0 var(--glitch-3);
  animation: glitch 742ms infinite;
  color: var(--alt-accent-900);
}

.glitch-alt span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch-alt span:first-child {
  animation: glitch 500ms infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-0.04em, -0.03em);
  opacity: 0.75;
}

.glitch-alt span:last-child {
  animation: glitch 375ms infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(0.04em, 0.03em);
  opacity: 0.75;
}

@keyframes glitch {
  0% {
    text-shadow:
      0.05em 0 0 var(--glitch-1),
      -0.03em -0.04em 0 var(--glitch-2),
      0.025em 0.04em 0 var(--glitch-3);
  }

  15% {
    text-shadow:
      0.05em 0 0 var(--glitch-1),
      -0.03em -0.04em 0 var(--glitch-2),
      0.025em 0.04em 0 var(--glitch-3);
  }

  16% {
    text-shadow:
      -0.05em -0.025em 0 var(--glitch-1),
      0.025em 0.035em 0 var(--glitch-2),
      -0.05em -0.05em 0 var(--glitch-3);
  }

  49% {
    text-shadow:
      -0.05em -0.025em 0 var(--glitch-1),
      0.025em 0.035em 0 var(--glitch-2),
      -0.05em -0.05em 0 var(--glitch-3);
  }

  50% {
    text-shadow:
      0.05em 0.035em 0 var(--glitch-1),
      0.03em 0 0 var(--glitch-2),
      0 -0.04em 0 var(--glitch-3);
  }

  99% {
    text-shadow:
      0.05em 0.035em 0 var(--glitch-1),
      0.03em 0 0 var(--glitch-2),
      0 -0.04em 0 var(--glitch-3);
  }

  100% {
    text-shadow:
      -0.05em 0 0 var(--glitch-1),
      -0.025em -0.04em 0 var(--glitch-2),
      -0.04em -0.025em 0 var(--glitch-3);
  }
}