∞ forever components

Terminal

Resource Monitor

Retro BBS-style system monitor showing 6 CPU core bars and 3 memory rows with ASCII block characters; values drift randomly every 420ms.

csslight complexitysubtle 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

Terminal/hacker aesthetic dashboards, loading screens, or ambient system-status displays in dark-mode UIs.

When not to

Light-background layouts (foreground and background are hardcoded dark orange-on-black). Do not use where real system data is expected.

Working with an AI agent

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

Change CPU core count to 8 by adding two more entries to the cores array, and slow the update interval from 420 to 800ms.

Safe to edit

  • core count and labels (cores array)
  • memory row labels and starting values (mems array)
  • bar width (BARS=10)
  • update interval (420ms)
  • color thresholds (cls function: 75/50 cutoffs)

Keep intact

  • visibilitychange stop/play guard
  • prefers-reduced-motion early return in play()
  • IIFE wrapper

Known limitations

  • Values are simulated random drift — not wired to real system APIs
  • Background and text colors hardcoded; requires manual edit to change palette
  • DOM rebuild on every tick (innerHTML reset) — acceptable at low frequency but not scalable to high-frequency updates

terminalmonitorretrodata-displayasciibbsdashboard

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