ChatGPT-style Text Typing Effect – ChatGPT Typewriter

Preview:

Description:

The ChatGPT Typewriter script simulates the text typing effect you see on ChatGPT (https://chat.openai.com/).

The best part is that the script provides a custom random delay effect to emulate natural thinking and typing patterns.

It also displays a blinking cursor at the end of the typing sequence, enhancing the overall typing experience and bringing the effect to life.

How to use it:

1. Create a container in which the text will be printed with a typing animation.

<div id="typewriter"></div>

2. Add the following JavaScript snippets to your document.

const typewriter = document.getElementById('typewriter');
let index = 0;
function type() {
  if (index < text.length) {
    typewriter.innerHTML = text.slice(0, index) + '<span class="blinking-cursor">|</span>';
    index++;
    setTimeout(type, Math.random() * 150 + 50);
    } else {
      typewriter.innerHTML = text.slice(0, index) + '<span class="blinking-cursor">|</span>';
    }
}
// start typing
type();

3. Style & animate the cursor.

.blinking-cursor {
  margin-left: 5px;
  background-color: #fff;
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  50.1%, 100% {
    opacity: 0;
  }
}

4. Define your text to be printed.

const text = "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.";