Four cursor treatments
Choose a line, block, underscore, or a quiet cursorless reveal.
Type & sequence
Typewriter Sequence
Compose a purposeful stepped reveal with a clear label, intentional cursor, and designed surface. The whole phrase remains available to assistive technology while the visual line types.
Typewriter sequence / stepped reveal
Pace the sentence
Typing motion works best when it earns the wait.
Reserve typewriter sequences for concise system responses, prompts, quotations, and moments where revealing the sentence is part of the meaning.
Designed surfaces
Present the message cleanly or inside terminal, paper, and card compositions.
No scheduler
CSS steps produce bounded deterministic motion without runtime intervals or animation frames.
Three-step workflow
How to use the Typewriter studio
- Keep the message concise
Short lines preserve the relationship between keystrokes and meaning.
- Set the ending
Choose whether the phrase holds or erases before a replay.
- Check all input widths
Verify the fitted phrase in the studio before exporting.
Questions, answered.
Is each letter inserted into the DOM?
No. The full sentence is present from the start and a visual clip reveals it in steps.
Can I remove the cursor?
Yes. Cursorless mode creates a quieter progressive reveal.
Are there any timers?
No. Exported sequences use CSS keyframes and steps only.
What does reduced motion show?
It shows the complete phrase and stable cursor immediately.