@keyframes flicker {
  $steps: 20;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      opacity: random();
    }
  }
}

body {
  background: #000;
  text-transform: uppercase;

  &::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: transparentize($primary-color-flicker,0.9);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
  }
  // scanlines
  &::before{
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(transparentize($primary-color-flicker,1) 50%, transparentize(darken($primary-color-flicker,10),0.75) 50%), linear-gradient(90deg,transparentize(#ff0000,0.94),transparentize(#00ff00,0.98),transparentize(#0000ff,0.94));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
  }
}
@keyframes flicker {
  $steps: 20;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      opacity: random();
    }
  }
}

body {
  background: #000;
  text-transform: uppercase;

  &::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: transparentize($primary-color-flicker,0.9);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
  }
  // scanlines
  &::before{
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(transparentize($primary-color-flicker,1) 50%, transparentize(darken($primary-color-flicker,10),0.75) 50%), linear-gradient(90deg,transparentize(#ff0000,0.94),transparentize(#00ff00,0.98),transparentize(#0000ff,0.94));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
  }
}
Fix flicker on page longer than viewport height
Fix flicker on page longer than viewport height
