Anime Typewriter Pro

<div class="atp-wrap" id="atp-wrap"><span class="atp-cursor">|</span></div>

.atp-wrap {
  font-size: 24px;
  font-weight: 700;
  color: #e2e8f0;
  min-height: 36px;
}
.atp-char {
  display: inline-block;
  opacity: 0;
}
.atp-cursor {
  display: inline-block;
  color: #6366f1;
  animation: atp-blink 0.8s step-end infinite;
  margin-left: 1px;
}
@keyframes atp-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

const wrap = document.getElementById('atp-wrap');
const cursor = wrap.querySelector('.atp-cursor');
const text = 'Welcome to Animotion';
text.split('').forEach(function(ch) {
  const span = document.createElement('span');
  span.classList.add('atp-char');
  span.textContent = ch === ' ' ? '\u00A0' : ch;
  wrap.insertBefore(span, cursor);
});
anime({
  targets: '.atp-char',
  opacity: [0, 1],
  duration: 50,
  delay: anime.stagger(70),
  easing: 'steps(1)'
});