Terminal

Network Trace

Simulates a live traceroute — hops appear one by one with color-coded latency (green/orange/red); ms values fluctuate after trace completes, then loop.

cssmedium 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-aesthetic dashboards, network/devops themed hero sections, or ambient tech backgrounds.

When not to

Contexts requiring real network data — all hops are hardcoded fiction. Not suitable as an actual diagnostic tool.

Working with an AI agent

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

Change the target to '1.1.1.1' (update trm-cmd text and hops array IPs), add a 4th column with packet loss %, set interval between hops to 400ms.

Safe to edit

hops array (IPs, hostnames, base latency)
hop reveal interval (600ms in setInterval)
ms update interval (500ms in updateTimer)
latency thresholds in msClass (20ms/60ms)
loop restart delay (4000ms in setTimeout)

Keep intact

visibilitychange stop/play guard
IIFE wrapper
reduce (prefers-reduced-motion) instant-render path

Known limitations

All network data is fictional — misleading if users expect real diagnostics
Grid column widths hardcoded; long hostnames truncate silently

terminalnetworktraceroutetableloopmonospacehacker

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