<div class="wrapper">
  <div id="cyberpunk">
    <h1 class="text">huh?</h1>
    <h1 class="text">huh?</h1>
    <h1 class="text">huh?</h1>
    <div class="thing-1"></div>
  </div>  
  <div id="scanline"></div>
</div>

html,body{
  margin:0; 
  height:100%;
}
.wrapper{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: hsl(249, 40%, 60%);
  background-color: #111;
}
#cyberpunk{
  margin: 0;
  padding: 0;
  letter-spacing: 40px;
  filter: drop-shadow(0 0 20px hsla(320, 40%, 60%, 0.8));
  font-size: 64px;
  position: relative;
  z-index: 1;
  font-family: 'Passion One', cursive;
  font-style: italic;
}    
.text{
  
  &:nth-child(1){
    color: hsl(320, 90%, 90%);
    // visibility:hidden;
    clip-path: inset(40% 0% 40% 0%);
    z-index: 5;
  }
  
  &:nth-child(2){
    position: absolute;
    top: 0;
    left:0;
    z-index:10;
    color: hsl(260, 90%, 80%);
    clip-path: inset(0% 0% 60% 0%);
    animation: random1 1000ms steps(1) alternate infinite;
  }
  
  &:nth-child(3){
    position: absolute;
    top: 0;
    left:0;
    z-index:10;
    color: hsl(260, 90%, 50%);
    clip-path: inset(60% 0% 0% 0%);
    // visibility: hidden;
    animation: random2 1000ms steps(1) alternate infinite;
    
  }
  
}
.thing-1{
  position: absolute;
  left: 0;
  top: 20%;
  height: 50%;
  width: 100%;
  background-color: hsl(225, 100%, 40%);
  z-index: -1;
  animation: random-clip-1 20s steps(1) infinite;
}
#scanline{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left:0;
  z-index: 100;
  background-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0.5) 50%,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0) 100%
  );
  background-size: 100% 2px;
}

Math.Ran = function(max){
  let rn = Math.round(Math.random() * max);
  rn *= Math.random() > 0.5 ? -1 : 1;
  return rn
}

function generateRandomKeyFrames(dis, len, name){
  let keyframes = ``;
  for(var i = 0; i < len; i++){
    keyframes += `${(i / len) * 100}%{transform: translateX(${Math.Ran(dis)}px)}`
  }
  
  let style = document.createElement('style');
  style.innerHTML = `@keyframes ${name} { ${keyframes} }`;
  
  document.body.appendChild(style);
}
function generateRandomClipFrames( len, name){
  let keyframes = ``;
  let size = 100;
  for(var i = 0; i < len; i++){
    keyframes += 
      `${(i / len) * 100}%{
    clip-path: inset(${Math.Ran(size)}% ${Math.Ran(size)}% ${Math.Ran(size)}% ${Math.Ran(size)}%)
}`
  }

  let style = document.createElement('style');
  style.innerHTML = `@keyframes ${name} {
${keyframes} 
}`;

  document.body.appendChild(style);
}

generateRandomKeyFrames(15, 16, "random1")
generateRandomKeyFrames(10, 10, "random2");
generateRandomClipFrames(200, "random-clip-1")