∞ forever components

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 →
1

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:

Edit the OUTPUT array of [text,class] lines, the compact reduced-motion frame, setInterval(tick,440) and hold=3. This is a local demonstration, not a real build.

Safe to edit

  • build output (OUTPUT array of [text,class])
  • line interval (440ms) and completion hold (3 ticks)
  • compact reduced-motion frame below320px
  • terminal palette (.bld04-* classes)

Keep intact

  • IIFE wrapper
  • visibilitychange stop/play guard
  • prefers-reduced-motion representative completed build
  • whole newest-row trimming after line insertion and resize
  • pre-rolled prompt and autonomous tick loop

Known limitations

  • Invented output only; no package install, command or real build runs
  • Dark terminal palette; no light-mode claim
  • Local passive demo; no exposed pause button

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 +5/-2 counts, a hunk header, then context/addition/deletion lines…
  • 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,…