Animated Terminal

A command-line terminal that simulates typing line by line, with per-character command entry, output reveals, and looping playback.

A terminal with a macOS window look that "types" each line out in order: command lines are entered character by character behind a prompt, output and comment lines are revealed in rhythm, and a blinking idle cursor is left at the end.

Loading preview…

npx shadcn@latest add https://webberui.com/r/animated-terminal.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Typing speed (ms per character)typingSpeed

Pause between lines (ms)lineDelay

500

Prompt symbolprompt

Window titletitle

Show the traffic-light dotsshowTrafficLights

Looploop

<AnimatedTerminal />

Installation

npx shadcn@latest add https://webberui.com/r/animated-terminal.json

Or, once registries are configured in components.json, install it as @webberui/animated-terminal.

Usage

import { AnimatedTerminal } from "@/components/ui/animated-terminal";

<AnimatedTerminal
  title="webberui — zsh"
  lines={[
    { type: "command", text: "npm run build" },
    { type: "output", text: "Build complete in 4.2s", delay: 800 },
  ]}
/>;

Each entry in lines has a type of "command", "output", or "comment"; only command is typed out character by character and shows a prompt, while output and comment are revealed a whole line at a time. Use delay to add a pause before a given line starts, simulating a compile or a wait.

Props

Prop	Type	Default	Description
`lines`	`TerminalLine[]`	—	The lines to play, in order
`typingSpeed`	`number`	`45`	Per-character typing speed for `command` (milliseconds per character)
`lineDelay`	`number`	`500`	Pause after each line finishes, before the next one starts (milliseconds)
`startDelay`	`number`	`300`	Delay before the whole thing starts (milliseconds)
`prompt`	`string`	`"$"`	Default prompt
`title`	`string`	`"bash"`	Text in the window title bar
`showTrafficLights`	`boolean`	`true`	Show the three macOS red/yellow/green lights
`loop`	`boolean`	`false`	Replay from the start once finished
`loopDelay`	`number`	`2200`	Pause before looping (milliseconds)

TerminalLine

Field	Type	Default	Description
`type`	`"command" \| "output" \| "comment"`	`"command"`	Line type
`text`	`string`	—	The line's text content
`prompt`	`string`	inherits `prompt`	Override the prompt for this line (only applies to `command`)
`delay`	`number`	`0`	Extra pause before this line starts (milliseconds)

Accessibility

When the user has "reduce motion" enabled at the system level, every line is rendered complete right away and the cursor does not blink
The three window lights and the cursor all carry aria-hidden, so they do not interfere with screen readers