<div class="glitch">
  <div class="glitch__container">
    <div class="glitch__text">
      <h1 class="glitch__text__title glitch-effect">
        <strong>404</strong> <br> PAGE NOT FOUND
        <span class="glitch-effect-text-clr1"><strong>404</strong> <br> PAGE NOT FOUND</span>
        <span class="glitch-effect-text-clr2"><strong>404</strong> <br> PAGE NOT FOUND</span>
      </h1>
    </div>
  </div>
</div>
<canvas class="particles"></canvas>

body {
  font-family: sans-serif;
  background-color: #fef9f6;
}

.glitch {
  &__container {
    position: relative;
    margin: 0 auto;
    width: 84vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  &__text {
    padding: 0 1vw;
    color: #111;
    text-align: center;

    &__title {
      display: inline-block;
      font-size: 5vw;
      white-space: nowrap;
      line-height: 1;
      
      & strong {
        font-size: 20vw;
      }

      &.glitch-effect {
        position: relative;
        display: inline-block;

        &.slice {
          &::after {
            content: '';
            background-color: #fff;
            height: 5%;
            width: 110%;
            position: absolute;
            top: 30%;
            left: -5%;
            z-index: 1;
          }

          &::before {
            content: '';
            background-color: #fff;
            height: 10%;
            width: 110%;
            position: absolute;
            top: 60%;
            left: -5%;
            z-index: 1;
          }
        }

        span {
          position: absolute;
          top: 0;
          display: none;
          z-index: -1;

          &.glitch-effect-text-clr1 {
            color: rgba(#f0f, 0.9);
            left: -2px;
          }

          &.glitch-effect-text-clr2 {
            color: rgba(#00fffa, 0.9);
            right: -2px;
          }
        }

        &.active span {
          display: inline-block;
        }
      }
    }
  }
}

.particles {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: 0;
}

  const glitch = document.querySelector('.glitch-effect')
  const tl = new TimelineMax({ id: 'getGlitch', repeat: -1, repeatDelay: 3 })

  tl
    .fromTo(glitch, 0.1, { x: 0 }, { x: 10, ease: SteppedEase.config(2), className: '+=active' })
    .to(glitch, 0.1, { scale: 1.4, ease: SteppedEase.config(2) })
    .to(glitch, 0.1, { scale: 1, rotationY: 180, ease: SteppedEase.config(2) })
    .fromTo(glitch, 0.1, { y: 0 }, { y: -10, ease: Linear.easeNone })
    .fromTo(glitch, 0.1, { y: -10 }, { y: 0, ease: Linear.easeNone })
    .to(glitch, 0.1, { rotationY: 0, ease: Linear.easeNone })
    .set(glitch, {className: '+=slice'})
    .to(glitch, 0.1, { x: -30, ease: SteppedEase.config(1) })
    .set(glitch, {className: '-=slice'})
    .to(glitch, 0.1, { x: 10, ease: SteppedEase.config(1) })
    .to(glitch, 0.1, { scale: 1.8, ease: SteppedEase.config(2) })
    .to(glitch, 0.1, { scale: 1, ease: SteppedEase.config(2) })
    .to(glitch, 0.1, { x: 0, ease: SteppedEase.config(1) })
    .fromTo(glitch, 0.1, { x: 0 }, { x: 5, ease: SteppedEase.config(2), className: '-=active' })

    .fromTo(glitch, 0.2, { x: 0 }, { x: 5, ease: SteppedEase.config(2), delay: 2, className: '+=active' })
    .set(glitch, { className: '-=active' })

    .fromTo(glitch, 0.2, { x: 0 }, { x: 5, ease: SteppedEase.config(2), repeat: 1, delay: 1, className: '+=active' })
    .set(glitch, { className: '-=active' })


Particles.init({
  selector: '.particles',
  color: '#111',
  sizeVariations: 3,
  maxParticles: 140,
  responsive: [
    {
      breakpoint: 768,
      options: {
        maxParticles: 70
      }
    }, {
      breakpoint: 320,
      options: {
        maxParticles: 35
      }
    }
  ]
})