Typewriter effect for websites (typing text)
Write the fixed start and the words that rotate, one per line. Screen readers read the full sentence, without the animation.
How to useA headline that types itself
Typewriter effect for websites (typing text): what it is for
The typing text effect draws attention to the headline and shows several offers in the same space, such as "We build websites for bakeries, salons, auto shops". Write the fixed text and the rotating words, one per line.
Adjust the typing and deleting speed, the pause, looping, the cursor and the color. The code keeps the first word in the HTML and all the options in text read by screen readers and Google, and for people who asked for less motion the words swap at once, without typing.
How to use
- Write the fixed text and the words.
- Adjust speeds, pause and cursor.
- Copy the code into your headline.
When to use it
- Home page headline.
- A list of services in one spot.
- Freelancer portfolio.
Frequently asked questions
Does the effect hurt SEO?
Not when done like this: the first complete phrase is already in the HTML, and Google and screen readers read all the options in visually hidden text. The animation only changes what is shown on screen.
What is the ideal speed?
Between 50 and 90 milliseconds per letter feels like natural typing. The pause on the complete word should be long enough to read it, about 1.5 to 2 seconds.
What about people who prefer less motion?
For people who turned on reduce motion on their device, the words swap at once, without typing letter by letter, and the cursor does not blink.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.