Terminal Typing

Create a self-typing terminal window. A fake terminal that types commands character by character and prints their output lines, like a tiny recorded demo. Perfect for dev-tool landing pages. The window: dark (near-black) rounded card with a title bar holding the three traffic-light dots (red, amber, green, 8px circles) and a hairline separator. Content in a monospace font, 11-13px, line-height ~1.75. The script: an array of lines, each typed as either a command or an output. Commands start with an accent-colored '$ ' prompt and type at ~50ms per character with a block cursor at the end; when a command completes, pause ~350ms, then print its output lines whole, one per ~420ms. Style output by kind: plain output muted (55% white), success lines in green with a check or arrow glyph. When the script ends, hold ~3s, clear, and loop. Details: fix the window's height so the loop doesn't resize the page; if the script is long, scroll the content up as lines are added. Provide the full transcript as visually-hidden static text for screen readers. Under prefers-reduced-motion, render the finished transcript statically. 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.