Terminal Text

Terminal Text preview

A miniature terminal session, fully animated. The component first paints a colored shell prompt (user, host, working directory, the trailing $), then types the command character-by-character at a configurable speed — exactly the rhythm a hand at a keyboard produces. Once the command is fully written, a brief grace period passes and the output lines appear one after another with a small stagger, as if the program is flushing stdout. After everything has rendered, a soft blinking caret remains at the end of the buffer so the surface still feels alive. Built with Motion for the cursor pulse and pure React state for the typing/output state machine, it's hydration-safe (no Date.now or random in render) and replays cleanly when its props change. Drop it into a developer-tool landing page, an install-instructions hero, a CLI marketing section, or any moment that wants to say "we ship for engineers."

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:

use shadcnio to install the terminal-text text effect into my project

Related Components

FAQ