<h1 class="typing-text" ></h1>

html, body {
  margin: 0;
}

body {
  
  font-family: sans-serif;
  
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  background-color: #000;
  color: #fff;
}

h1 {
  margin: 0;
}

.typing-text::after {
  content: "|";
  animation: blink ease 1s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 0;
  } 50% {
    opacity: 1;
  }
}

// get the element
const text = document.querySelector('.typing-text');

// make a words array
const words = [
  "НЕЙРОН",
  "больше",
  "чем просто платформа",
  "сила",
  "объединяющая миры"
];

// start typing effect
setTyper(text, words);

function setTyper(element, words) {

  const LETTER_TYPE_DELAY = 75;
  const WORD_STAY_DELAY = 2000;

  const DIRECTION_FORWARDS = 0;
  const DIRECTION_BACKWARDS = 1;

  var direction = DIRECTION_FORWARDS;
  var wordIndex = 0;
  var letterIndex = 0;

  var wordTypeInterval;

  startTyping();

  function startTyping() {
    wordTypeInterval = setInterval(typeLetter, LETTER_TYPE_DELAY);
  }

  function typeLetter() {
    const word = words[wordIndex];

    if (direction == DIRECTION_FORWARDS) {
      letterIndex++;

      if (letterIndex == word.length) {
        direction = DIRECTION_BACKWARDS;
        clearInterval(wordTypeInterval);
        setTimeout(startTyping, WORD_STAY_DELAY);
      }

    } else if (direction == DIRECTION_BACKWARDS) {
      letterIndex--;

      if (letterIndex == 0) {
        nextWord();
      }
    }

    const textToType = word.substring(0, letterIndex);

    element.textContent = textToType;
  }

  function nextWord() {

    letterIndex = 0;
    direction = DIRECTION_FORWARDS;
    wordIndex++;

    if (wordIndex == words.length) {
      wordIndex = 0;
    }

  }
}