- var $text = 'Var';
  - for (i = 0; i < 10; i++)
    .text #{$text}

// change duration into a greater number 🙃
$duration: 6s;

@font-face {
  src: url("https://www.axis-praxis.org/fonts/webfonts/AvenirNext_Variable.woff2")
    format("woff2");
  font-family: "Avenir";
  font-style: normal;
  font-weight: normal;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: black;
  color: transparent;
  font-family: "Avenir";
}

.text {
  font-variation-settings: "wght" 400, "wdth" 100;
  font-size: 10em;
  text-align: center;
  position: absolute;
  animation: text-flow $duration infinite;
}

$text-color: pink;

@for $i from 1 to 10 {
  .text:nth-child(#{$i}) {
    animation-delay: $i * 0.25s;
    opacity: 1 - $i * 0.1;
    -webkit-text-stroke: 3px darken($text-color, $i * 2.5%);
    z-index: 1 - $i;
  }
}

@keyframes text-flow {
  25% {
    font-variation-settings: "wght" 900, "wdth" 100;
    filter: hue-rotate(0deg);
  }
  50% {
    transform: translateY(-100px);
    font-variation-settings: "wght" 400, "wdth" 100;
  }
  75% {
    transform: translateY(0%);
    font-variation-settings: "wght" 900, "wdth" 100;
    filter: hue-rotate(90deg);
  }
}