Typewriter Text Animation

<div class="inline-block">
  <style>#text-target-aura-emiz19wlbnx3r575 {
      border-right: 3px solid currentColor;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      vertical-align: bottom;
      animation: blink-cursor 0.75s step-end infinite;
    }

    @keyframes blink-cursor {
      from, to { border-color: transparent }
      50% { border-color: currentColor; } 
    }</style>
  <span id="text-target-aura-emiz19wlbnx3r575"></span>
  <script>(function() {
      const elementId = "text-target-aura-emiz19wlbnx3r575";
      const words = ["Automatiza", "Escala", "Rentabiliza"];
      const typeSpeed = 100;
      const deleteSpeed = 50;
      const pauseTime = 2000;

      let wordIndex = 0;
      let charIndex = 0;
      let isDeleting = false;
      const element = document.getElementById(elementId);

      function type() {
        const currentWord = words[wordIndex];

        if (isDeleting) {
          element.textContent = currentWord.substring(0, charIndex - 1);
          charIndex--;
        } else {
          element.textContent = currentWord.substring(0, charIndex + 1);
          charIndex++;
        }

        let currentSpeed = isDeleting ? deleteSpeed : typeSpeed;

        if (!isDeleting && charIndex === currentWord.length) {
          currentSpeed = pauseTime;
          isDeleting = true;
        } else if (isDeleting && charIndex === 0) {
          isDeleting = false;
          wordIndex++;
          if (wordIndex === words.length) {
            wordIndex = 0;
          }
        }

        setTimeout(type, currentSpeed);
      }

      if (element) {
        type();
      } else {
        console.error("No se encontró el elemento con ID: " + elementId);
      }
    })();</script>
</div>