v2.xevion.dev/_sass/glitch.scss

header {
  max-width: 100%;
  width: 100%;

  .stack {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;

    &.glitch span {
      animation: glitch 340ms cubic-bezier(0.46, 0.29, 0, 1.24) 1 backwards calc(var(--index) * 120ms),
        jitter 2000ms ease infinite 2s alternate-reverse;
    }

    span {
      font-weight: bold;
      grid-row-start: 1;
      grid-column-start: 1;
      font-size: 4rem;

      --stack-height: calc(100% / var(--stacks) - 1px);
      --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
      --clip-top: calc(var(--stack-height) * var(--index));
      --clip-bottom: calc(var(--stack-height) * var(--inverse-index));

      clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);

      animation: jitter 2000ms ease infinite 2s alternate-reverse;

      &:nth-child(odd) {
        --glitch-translate: 8px;
      }

      &:nth-child(even) {
        --glitch-translate: -8px;
      }
    }
  }
}

@keyframes glitch {
  0% {
    opacity: 0;
    transform: translateX(-50%);
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
  }
  60% {
    opacity: 0.5;
    transform: translateX(50%);
  }
  80% {
    transform: none;
    opacity: 1;
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  100% {
    text-shadow: none;
  }
}

@keyframes jitter {
  0% {
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    transform: translate(var(--glitch-translate));
  }
  2% {
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  4%,
  100% {
    text-shadow: none;
    transform: none;
  }
}