Bring a heading or slogan to life by typing the text out like a typewriter. With loop it alternates between multiple phrases.
Use Typewriter for a headline or slogan that should draw the eye without an image or video — a Hero subtitle or a short tagline in a header. The typing animation naturally holds attention for the second or two it takes to render, which plain static text can't do.
The loop and phrases props make it easy to cycle through several short value propositions in the same space, for example alternating 'Fast', 'Flexible' and 'Headless' inside a Hero subtitle instead of picking just one.
Typical use cases
A webshop might cycle a Hero subtitle through a handful of category names — 'Electronics', 'Fashion', 'Home' — as a quick, low-cost way to hint at catalogue breadth without listing every department. A portfolio site often uses it for a short, rotating tagline naming different disciplines — 'Photographer', 'Retoucher', 'Director' — right under the person's name in the header. A professional-services page frequently rotates a short value proposition — 'Faster', 'Cheaper', 'More reliable' — directly beneath the main heading, typically followed by a Cta button that turns the rotating pitch into an action.
Common mistakes
Cycling through too many phrases makes visitors wait unnecessarily long to see the actual point — three or four short phrases is usually the practical ceiling before the effect starts to feel slow rather than lively. Phrases of very different lengths can also cause the surrounding layout to visibly jump as the line grows and shrinks; keep phrases close in length, or give the container a fixed minimum width so nearby content doesn't reflow with every cycle. Reserve Typewriter for short taglines rather than anything a visitor needs to read carefully or copy — animated text is inherently slower to scan than static text, so it's the wrong choice for a sentence carrying real instructions. Avoid it in navigational or informational contexts too, like article titles, table headers or button labels, where content must be understood immediately in full; it belongs on marketing-oriented headlines, not on functional page furniture.
For a section where both the heading and its surrounding content should feel alive, pair Typewriter with GsapReveal on the section itself rather than triggering two competing motions in the same instant — let the section fade in first, then let the text start typing once it's in view.
Keep the underlying phrase text meaningful on its own even without the animation — visitors with a reduced-motion preference, or anyone who reads the page before the loop finishes, should still get a complete, sensible sentence rather than half a cycling phrase.
<Typewriter loop phrases='Fast|Flexible|Headless' />