Typewriter Effect

About this module

A JavaScript typewriter cycling through phrases with a blinking caret — perfect for hero subheads.

Installation

1. 1

   Create the files

   Create `index.html` and `style.css` in the same folder.

2. 2

   Paste the code

   Copy each file's source into its matching file.

3. 3

   Open in the browser

   Open `index.html` in any modern browser.

Usage

1. 1

   Copy the HTML

   Paste the markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="script.js"></script>
   <div class="mh-typewrap">
     <span class="mh-type-prefix">Copy production-ready </span>
     <span id="mh-type" class="mh-type"></span><span class="mh-caret" aria-hidden="true"></span>
   </div>

2. 2

   Wire up the script

   Include `script.js` before the closing body tag.

   const el = document.getElementById("mh-type");
   const words = ["components", "sections", "animations", "modules"];
   let wi = 0, ci = 0, deleting = false;
   const tick = () => {
     const word = words[wi];
     el.textContent = word.slice(0, ci);
     if (!deleting && ci < word.length) { ci++; setTimeout(tick, 90); }
     else if (deleting && ci > 0) { ci--; setTimeout(tick, 40); }
     else { deleting = !deleting; if (!deleting) wi = (wi + 1) % words.length; setTimeout(tick, deleting ? 350 : 1200); }
   };
   tick();