ChatGPT-style Text Typing Effect – ChatGPT Typewriter

Category: Animation , Javascript | April 20, 2023
Views Total:5,462 views
Official Page:Go to website
Last Update:April 20, 2023


ChatGPT-style Text Typing Effect – ChatGPT Typewriter


The ChatGPT Typewriter script simulates the text typing effect you see on ChatGPT (

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>';
    setTimeout(type, Math.random() * 150 + 50);
    } else {
      typewriter.innerHTML = text.slice(0, index) + '<span class="blinking-cursor">|</span>';
// start typing

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.";

You Might Be Interested In:

Leave a Reply