A Letter-by-Letter Typing Preview
Type a sample text and watch it appear letter by letter like a typewriter, with optional erasing and repeating. Animate one text sample in the browser, optionally erase it and repeat it. Pause freezes the current phase; Resume continues with the remaining delay. This is a visual preview, not a video or GIF recorder. The separate CSS starter has a narrower one-pass monospace scope.
Setting up and playing the preview
- Enter your words, including intentional spaces and line breaks, or choose a sample.
- Set the speed, cursor, font size and colors. Enable Loop or Delete if useful.
- Click Play. Pause and Resume preserve the current typing, waiting or deletion phase.
- Reset clears the preview. Editing any setting also resets it; click Play again.
- For a simple website demonstration, copy Starter CSS and use its matching HTML. Read its limitations before publishing.
How typing, deleting and timing work
The preview reveals whole grapheme clusters, keeping combined characters together. Physical whitespace remains in the text and line breaks are displayed with wrapping. Typing uses the selected delay; deletion uses 60% of that delay. A completed line waits for Cycle pause before deletion or repetition, with a 400 ms gap after deletion when looping.
Timers are cancelled on edits, Reset and navigation. Browser scheduling can delay callbacks, particularly in background tabs; speed values are requested delays rather than guaranteed frame timing. Reduced-motion preferences and Show without animation display full text without looping or sound.
The phases of one short run
| Action or phase | Visible text | Result |
|---|---|---|
| Type three graphemes | ABC | Wait for Cycle pause |
| Delete one grapheme | AB | Continue deleting |
| Pause, then Resume | AB, then A | Keep deletion direction and remaining delay |
| Delete finishes | Empty | Done; Play starts a fresh run |
Short headings, multiline text and a CSS experiment
Short heading draft
Compare pacing while keeping the actual message readable.
Multiline presentation
Preview your line breaks and pause at useful points.
Simple CSS experiment
Try the starter in a local page with its provided HTML and a monospace font.
Limits, errors and the CSS starter
The CSS starter does not recreate Loop, Delete, Pause/Resume or the selected preview font. It accepts one line of 1 to 200 printable ASCII characters, uses Courier New or monospace fallback, and reveals a width measured in ch units. Inspect spaces, punctuation and cursor edges in your destination layout. It is not a universal one-step-per-glyph animation for proportional fonts or Unicode.
Empty or invalid input disables Play and exposes an error, and unsupported controls or incomplete Unicode show an error too. Preview limits are 4,000 UTF-16 units and 1,000 grapheme clusters. Font size is 12 to 72 px; colors require six-digit hex. Font choices name local faces, so fallback can change appearance. Clipboard failure leaves selectable CSS for manual copying.
Accessibility and layout checks
Keep messages short, provide readable static text, and avoid relying on the animation alone to communicate. The visual preview is hidden from assistive readers while a stable full-text alternative remains available. Cursor marks are steady rather than continuously blinking. Check contrast and the destination layout on mobile.
References: timer scheduling and reduced-motion preferences.