Skip to content
Larwell Technologies
Home / Code Playground / Text
Text

JavaScript Typing Text Effect

A looping typewriter effect that types and deletes words — a popular hero headline animation.

By Ishrafil Khan Updated June 2026 Bokaro Steel City, India
JavaScriptAnimationText
Live Preview
HTML + CSS + JS 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body { margin: 0; height: 100vh; display: grid; place-items: center;
           background: #0a0a0a; color: #fff; font-family: system-ui, sans-serif; }
    .type { font-size: 32px; font-weight: 700; }
    .cursor { display: inline-block; width: 3px; height: 1em; background: #fff;
              margin-left: 2px; vertical-align: -3px; animation: blink .8s steps(1) infinite; }
    @keyframes blink { 50% { opacity: 0; } }
  </style>
</head>
<body>
  <div class="type"><span id="t"></span><span class="cursor"></span></div>
  <script>
    var words = ["Web Developer.", "Designer.", "Problem Solver."];
    var i = 0, j = 0, deleting = false;
    function loop() {
      var w = words[i];
      document.getElementById('t').textContent = w.slice(0, j);
      if (!deleting && j < w.length) { j++; }
      else if (deleting && j > 0) { j--; }
      else { deleting = !deleting; if (!deleting) { i = (i + 1) % words.length; } }
      setTimeout(loop, deleting ? 60 : 120);
    }
    loop();
  </script>
</body>
</html>

The classic "typewriter" effect: words type out character by character, pause, delete, and the next word begins — on an infinite loop. Perfect for hero headlines like "I'm a Developer / Designer / Problem Solver".

How it works

A small script keeps an index into the current word and a character counter. Each tick it slices the word to the current length, then either advances (typing) or retreats (deleting), switching words at the ends. A blinking cursor is pure CSS.

How to use it

  • Edit the words array with your own phrases.
  • Change the typing/deleting speeds (the 120 and 60 values).
  • Style the text and cursor to match your design.
Free to use under the MIT license. Built by Ishrafil Khan — need a custom build?

More snippets

Navigation

Pure CSS Hamburger Menu Morph to X
Backgrounds

Immersive Starfield Background Animation
Loaders

CSS Bouncing Ball Loader