∞ forever components

Terminal

Package Install

A green-on-dark terminal package manager that resolves and fetches invented dependencies, fills four CSS progress bars, prints a ├─ └─ dependency tree with versions, then reports \"added 128 packages in 3.2s\" and a funding line before looping from the top.

csslight 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, CLI or DevOps hero sections, and build/deploy loading screens that need a credible \"packages are installing\" ambient backdrop.

When not to

Non-technical audiences (output is meaningless without dev context) and light-background UIs — the background is hardcoded dark (#0d1117).

Working with an AI agent

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

Rename the packages in the deps and tree arrays to your own dependency names, change the summary line to \"added 214 packages in 5.1s\", and speed up the tree reveal by lowering the per-line await sleep(150) to 90ms.

Safe to edit

  • dependency progress bars and per-bar fill durations (deps array, --d values)
  • dependency tree lines and versions (tree array)
  • summary and funding text (added 128 packages / looking for funding lines)
  • resolving/fetching dot-animation timing (sleep values in cycle)
  • accent and bar colors (#00ff41, .pki-fill/.pki-track CSS)

Keep intact

  • IIFE 'use strict' wrapper
  • visibilitychange stop/resume guard via the running flag
  • prefers-reduced-motion static final frame that returns early (staticFrame + return)
  • role=img aria-label on the wrapper and aria-hidden corner caption

Known limitations

  • Background and green palette are hardcoded — not part of the --pro-* themeable set, so retheming requires CSS edits
  • Progress-bar CSS fill durations are decoupled from the fixed 2350ms wait, so drastically longer bar durations can be cut off before completing
  • Purely ambient with no click interactivity; content is fixed invented data, not real registry output

terminalpackage-managerinstallprogress-barmonospaceloopdark-modeclideveloper

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.
  • 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…