Typewriter Text Loop — CSS & JavaScript Animation with Source Code

The Typewriter Text Loop simulates a terminal typing experience where text appears letter-by-letter, then gets deleted, and cycles through multiple different phrases. It uses CSS for the classic blinking cursor animation (via step-end easing), and a compact vanilla JavaScript timer loop for the typing and deleting logic.

How It Works

The JavaScript tick() function uses substring() to incrementally grow or shrink the displayed text string. A character counter ci tracks position. At the end of a word, a long setTimeout pause simulates “reading time” before deletion begins. After deletion completes, the word index wi advances to the next phrase. CSS handles the blinking cursor via an opacity keyframe with step-end timing.

Use Cases

• Hero sections with multiple value propositions (“I build websites. I design apps. I ship fast.”)
• Terminal-themed developer portfolios and personal sites
• Loading screens with status messages
• Landing pages for SaaS products

How to Customize

• Change the words: Update the words array in JavaScript
• Change typing speed: Modify the 110 value (ms per character typed) or 45 (ms per character deleted)
• Change the cursor character: Replace | in .cursor with ▌ or _
• Change cursor color: Modify the color: #10b981 on .typed in CSS

Frequently Asked Questions

How do I randomize the word order instead of sequential?

Replace wi = (wi + 1) % words.length with wi = Math.floor(Math.random() * words.length) in the JavaScript to pick a random next word each time.

Can I add an infinite typing animation with a single word (no loop)?

Set words = ['Your Single Phrase'] and remove the deletion branch by setting isDeleting to never become true. Or use a pure CSS approach with @keyframes and width on a overflow: hidden container.

How do I stop the animation after one loop?

Add a counter variable and check if (wi === 0 && ci === 0 && deleting === false) after the first loop to stop calling setTimeout.