Typewriter
Inline typing animation — single phrase or cycling texts with caret styles and reduced-motion fallback.
Typewriter animates copy inside a span by writing characters into a typed layer while an aria-live region holds the full phrase for screen readers. Nest it inside Title or Text so size, tone, and heading level live on the parent — Typewriter stays the progressive reveal.
Pass a single string for one line, or a stable list of phrases to cycle with type, pause, delete, and loop timing. Choose a caret style (or none), and reserve layout space when surrounding flex rows should not jump while letters appear. Prefer Typewriter when progressive letter reveal is the intent; loading shimmer on static copy belongs on Shimmer.
Reduced motion
When prefers-reduced-motion: reduce is active, Typewriter skips straight to the full phrase (the last phrase when cycling). Do not rely on the typing effect alone to reveal critical information.
When to use
- Marketing heroes that cycle a few short product lines
- A muted subtitle that should type once under a static title
- Blurbs that wrap and need reserved height while phrases cycle
When not to use
- Loading shimmer on already-known static copy → Shimmer
- Critical information that must appear immediately for every reader
- Inline arrays recreated each render (keep the phrase list stable)
Related
- Title — display parent for hero cycles
- Text — body or muted parent for single phrases
- Shimmer — moving highlight across static text
Common examples
Cycle text
Nest Typewriter in a display Title for marketing heroes. Reserved space holds the line box through type/delete; an underscore caret with a themed color matches the usual auth compose pattern.
Keep texts at module scope (or otherwise stable). Inline arrays recreate on every parent render and restart the cycle.
Colored caret
String children type once under a static Title. An underscore caret with a highlight color lifts the mark above muted copy so the cursor reads as an accent while the phrase stays quiet.
Reserved space
preserveSpace plus a constrained maxWidth on Text keeps multi-line height steady while phrases cycle. Hiding the caret softens the reveal when a blinking mark would compete with body rhythm.
Typewriter is decorative motion on labeled copy — parent Title/Text (or a surrounding region) owns the accessible name and any busy semantics.
Ask your agent
Replace the static hero headline with a Typewriter that cycles three short product lines. Nest it in Title, reserve space so the CTA row does not jump, and use an underscore caret themed to the base accent.Last updated on