Typewriter

Create a typewriter text effect. Text that types itself character by character with a blinking caret, then pauses, deletes, and types the next line from a list, looping forever. Timing: type at ~55ms per character, hold the full line for 1.4s, delete at ~28ms per character, then move to the next line. The caret is a small rectangle (about 8px wide, 1.05em tall) in the accent color, blinking with a 1s steps(1) opacity animation, sitting right after the text. Layout: use a monospace font and reserve the line's height (min-height) so the block never collapses between lines. This effect looks best inside a dark terminal-style card with a small uppercase label. If prefers-reduced-motion is enabled, show the first line complete with a static caret and no typing loop. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.