Interactive Terminal

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

Motion Effectsspringlayoutterminalclitypewritersoundshell

Interactive Terminal

Keyboard sounds require a sound file. Download sound.ogg and place it at public/sounds/sound.ogg. Without it the terminal falls back to a synthetic click.

Download

Nexus-Macbook — bash

user@Nexus-Macbook: ~

Tap for sound

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

Installation