Text typing with cursor blinkin

chatgptblinking.html

<div id="typewriter">
   <span id="typewriter-text"></span><span class="blinking-cursor">|</span>
</div>
<script src="https://cdn.twind.style" crossorigin></script>
<script>
function type(index, text) {
  const typewriter = document.getElementById('typewriter-text');
  if (index < text.length) {
    typewriter.__run = () => type(index + 1, text)
    typewriter.innerHTML = text.slice(0, index);
     setTimeout(() => typewriter.__run(), Math.random() * 150 + 50);
    } else {
      typewriter.innerHTML = text;
      typewriter.__run = () => type(0, text)
      setTimeout(() => typewriter.__run(), Math.random() * 4000 + 5000);
    }
}

type(0, "This is a ChatGPT-like typing effect, simulating human typing with random delays and a blinking cursor. It also supports multiline text and ensures the cursor is displayed at the end of the last output character.");

</script>
<style type="text/css">
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  
  50.1%, 100% {
    opacity: 0;
  }
}

.blinking-cursor {
  margin-left: 3px;
  animation: blink 1s infinite;
}

</style>