The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<h1 class="typed">
  I build <span id="typed" class="words"></span><span class="cursor" aria-hidden="true">|</span>
</h1>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a typewriter text effect with HTML, CSS and vanilla JavaScript (no libraries).

Requirements:
- A large white heading on a dark page that reads "I build " followed by a rotating phrase in orange (#ff7b00) and a blinking "|" cursor.
- Phrases: "web apps.", "mobile apps.", "REST APIs.", "AI features."
- JavaScript loop using setTimeout: type one character at a time (90ms per character); when the phrase is complete, pause 1600ms; then delete one character at a time (40ms); when empty, pause 300ms and move to the next phrase, looping forever.
- Track state with phraseIndex, charIndex and a deleting flag; render with textContent and slice.
- The cursor blinks with a CSS animation using steps(1) and has aria-hidden="true".
- If the user prefers reduced motion, show the first phrase statically and do not animate.

Return a single HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Keep three pieces of state: which phrase, how many characters are shown, and whether you are typing or deleting.

2. 2

   On each tick, add or remove one character and render phrase.slice(0, charIndex) with textContent.

3. 3

   Choose the next delay based on the state: fast while deleting, slower while typing, long when a phrase is complete.

4. 4

   Flip the deleting flag at the ends, and advance to the next phrase when the text is empty.

5. 5

   Blink the cursor with a CSS keyframe using steps(1) so it switches on and off instead of fading.

6. 6

   Respect prefers-reduced-motion by showing static text.

Customisation tips

• In React, hold the state in useState and schedule ticks inside the setTimeout callback, not directly in the effect body.
• Put the full sentence in an aria-label on the heading so screen readers read it once instead of letter by letter.
• Keep phrases similar in length to reduce layout shift on the line.

More components