Interactive Terminal — React Component

macOS-style terminal window with typewriter commands, cursor blink, output sequencing, and optional sound.

Motion Effectsspringlayoutterminalclitypewritersoundshell

Interactive Terminal

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

promptSymbol

Prompt symbol shown before each command.

username

Username displayed in prompt/header.

hostname

Hostname displayed in prompt/header.

typingSpeed

Base typing speed in ms/character.

typingJitter

Random typing cadence variation (ms).

startupDelay

Delay before script starts (ms).

delayBetweenCommands

Pause between commands (ms).

autoStart

Auto-run when component enters viewport.

Generated JSX

Copy this into your page.

<Terminal
  promptSymbol="➜"
  username="user"
  hostname="nexus"
  typingSpeed={28}
  typingJitter={28}
  startupDelay={450}
  delayBetweenCommands={850}
  autoStart={true}
/>

Animation effects

springlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

About Interactive Terminal

The Interactive Terminal is a React component that simulates a CLI interface with animated command execution and sequential output streaming. Commands animate in with a typewriter effect and output lines stream into the terminal one by one. Custom commands, multi-line output, and a configurable prompt are all supported. Add it to developer tool landing pages and documentation to demonstrate CLI workflows without running actual shell sessions.

Common use cases

CLI tool and developer tool demos
Installation guide step illustrations
API and SDK documentation examples
DevOps and infrastructure tool landing pages

Installation