Terminal

Build Runner

Simulates npm install + build pipeline in a scrolling terminal; packages, lint/compile steps, and file-change events stream in sequence and loop endlessly.

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-tool landing pages, loading screens for build/deploy dashboards, or any context needing a credible "code is running" ambient backdrop.

When not to

Non-technical audiences (output is meaningless without dev context). Light-background UIs — background is hardcoded dark (#0d0f0a).

Working with an AI agent

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

Change the package list in the pkgs array to your project's dependencies, update the bundle output line, and slow each step interval to 350ms.

Safe to edit

package list (pkgs array)
build step messages (steps array)
per-phase interval timings (120/180/280ms)
MAX visible lines (MAX=16)
terminal accent color (#00ff41)
line cadence (setInterval(tick, 440 ms); rerun after a ~1.3 s hold)

Keep intact

visibilitychange stop/play guard
prefers-reduced-motion instant-render path
IIFE wrapper
while(running) loop with running flag
pre-rolled prompt + tick loop (paused on visibilitychange)

Known limitations

Cursor CSS class defined but never injected into DOM during streaming
Background hardcoded dark — must edit CSS to change terminal look
Loops forever with no pause control exposed to the user

terminalbuildtypewriterloopdeveloperclitext-animation

More Terminal components

Shell SessionSimulates a looping shell session: commands type out character-by-character with a blinking cursor, then output lines appear, then the next command begins.
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.
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,…