Simple type simulation

type-simulation.html

<style>
.text {
  position: relative;
}
.text.type-finished::before {
  animation: .5s steps(2, jump-none) 0s infinite alternate pulse;
}
.text::before {
  content: '';
  height: 1em;
  width: 2px;
  position: absolute;
  right: -2px;
  bottom: 0;
  background-color: black;
}

@keyframes pulse {
  from { opacity: 1; }
  to { opacity: 0; }
}

</style>

<span class="text"></span>

<script>
const random = (min, max) => ~~(Math.random() * (max - min) + min)
const wait = time => new Promise(r => setTimeout(r, time))

async function type(text, target, delay = random(50, 200)) {
  for (const ch of text) {
    await wait(delay + random(-50, 50))
    requestAnimationFrame(() => target.insertAdjacentText('beforeend', ch))
  }
}

const $span = document.querySelector('.text')

type('Hi there!', $span).then(() => $span.classList.add('type-finished'))
</script>