Glitch 404

<div class="nuda-err-glitch">
  <div class="nuda-err-glitch__wrap" aria-label="404">
    <span class="nuda-err-glitch__text" data-text="404">404</span>
  </div>
  <p class="nuda-err-glitch__msg">Signal lost</p>
  <p class="nuda-err-glitch__sub">This page has been corrupted or removed.</p>
</div>

.nuda-err-glitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  text-align: center;
  width: 100%;
  max-width: 260px;
}

.nuda-err-glitch__wrap {
  position: relative;
  margin-bottom: 10px;
}

.nuda-err-glitch__text {
  display: block;
  font-size: 58px;
  font-weight: 900;
  font-family: ui-monospace,monospace;
  letter-spacing: -.04em;
  color: #e4ff54;
  position: relative;
  animation: _nuda-errglitch 3s infinite;
}

.nuda-err-glitch__text::before,.nuda-err-glitch__text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  letter-spacing: inherit;
}

.nuda-err-glitch__text::before {
  color: #ff6b6b;
  clip-path: polygon(0 20%,100% 20%,100% 40%,0 40%);
  animation: _nuda-errglitch-a 3s infinite;
  left: 2px;
}

.nuda-err-glitch__text::after {
  color: #6bfff8;
  clip-path: polygon(0 60%,100% 60%,100% 80%,0 80%);
  animation: _nuda-errglitch-b 3s infinite;
  left: -2px;
}

.nuda-err-glitch__msg {
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

.nuda-err-glitch__sub {
  color: #555;
  font-size: 10px;
  line-height: 1.5;
  margin: 0;
  max-width: 190px;
}

@keyframes _nuda-errglitch {
  0%,90%,100% {
    transform: none;
  }
  92% {
    transform: skewX(-2deg);
  }
  94% {
    transform: skewX(2deg);
  }
  96% {
    transform: none;
  }
}

@keyframes _nuda-errglitch-a {
  0%,90%,100% {
    opacity: 0;
    transform: none;
  }
  92% {
    opacity: 1;
    transform: translateX(-3px);
  }
  94% {
    opacity: 1;
    transform: translateX(3px);
  }
  96% {
    opacity: 0;
  }
}

@keyframes _nuda-errglitch-b {
  0%,91%,100% {
    opacity: 0;
    transform: none;
  }
  93% {
    opacity: 1;
    transform: translateX(3px);
  }
  95% {
    opacity: 1;
    transform: translateX(-3px);
  }
  97% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-err-glitch__text,.nuda-err-glitch__text::before,.nuda-err-glitch__text::after {
    animation: none;
  }
  .nuda-err-glitch__text::before,.nuda-err-glitch__text::after {
    opacity: 0;
  }
}