Typewriter
`<pura-typewriter>` types text out character by character and can cycle through several `|`-separated `phrases`, with an optional CSS-only blinking `caret`. It is accessible by design: the full text is rendered for no-JS and exposed via the host `aria-label`, while the animated span is `aria-hidden` so screen readers are not spammed per keystroke. Tune `speed`, `delete-speed`, and `pause`; start on view, load, or manually. Under reduced motion it renders the first phrase in full with no typing. It mirrors the visible text in `data-pura-typewriter-text` and registers in `window.__puraTypewriters` for agent enumeration.
Preview
<!-- Single phrase -->
<pura-typewriter text="Welcome to pura" caret></pura-typewriter>
<!-- Cycle phrases forever -->
<pura-typewriter
phrases="Native web components.|Zero dependencies.|Agent-readable motion."
caret loop speed="60"></pura-typewriter>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
text | string | — | The string to type (single phrase). |
phrases | string | — | "|"-separated phrases to cycle through. Overrides text. |
speed | number | 55 | Milliseconds per character while typing. |
delete-speed | number | 30 | Milliseconds per character while deleting. |
pause | number | 1400 | Milliseconds to hold a completed phrase before deleting. |
caret | boolean | false | Show a blinking caret. |
loop | boolean | false | Keep cycling phrases (delete and retype). |
start | "view" | "load" | "manual" | view | When to begin: on first intersection, immediately on load, or only via start(). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/typewriter.js"></script>import "./pura/lib/typewriter.js";