Terminal

Shell Session

Simulates a looping shell session: commands type out character-by-character with a blinking cursor, then output lines appear, then the next command begins.

cssmedium complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Developer portfolios, tech landing pages, retro/hacker aesthetic backgrounds, loading screens for CLI-adjacent tools.

When not to

Non-technical audiences or contexts without a dark/terminal theme. Avoid where motion competes with primary content.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the HOST to 'user@prod-01:~$ ', replace the first session command with 'docker ps --format "table {{.Names}}\t{{.Status}}"', and slow typing speed by changing the base delay from 60 to 100.

Safe to edit

HOST prompt string
sessions array (cmd + out lines)
typing speed (60+Math.random()*40)
output line delay (120ms)
pause between sessions (1400ms)
max visible lines (18)

Keep intact

visibilitychange stop/play guard
prefers-reduced-motion static fallback
IIFE wrapper
cursor element insertion before cursor span

Known limitations

Background color hardcoded in CSS (#0d1117) — must edit to change from dark navy
Line cap at 18 removes oldest lines silently with no scroll history

terminaltypewritershellretroambientmonospaceloop

More Terminal components

Resource MonitorRetro BBS-style system monitor showing 6 CPU core bars and 3 memory rows with ASCII block characters; values drift randomly every 420ms.
Log StreamSimulates a live server log tail — new entries slide in every 650ms with color-coded INFO/WARN/ERROR/DEBUG levels and real-time timestamps.
Build RunnerSimulates npm install + build pipeline in a scrolling terminal; packages, lint/compile steps, and file-change events stream in sequence and loop endlessly.
Network TraceSimulates a live traceroute — hops appear one by one with color-coded latency (green/orange/red); ms values fluctuate after trace completes, then loop.
Diff ViewerA unified git diff viewer that streams a code review in line by line: a file header with +12/-4 counts, a hunk header, then context/addition/deletion…
Git GraphAn ASCII git commit graph in a green monospace CRT terminal: box-drawing branch rails (│ ├ └ ╲ ╱ ●) run down the left as commits stream in top-to-bottom,…