∞ forever components

Business Graphics

Grid Monitor

System health grid monitoring status of 30 nodes with active scanning sweeps and interactive detail pane.

cssmedium complexitymoderate motionclick

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

DevOps status pages, server health dashboards, security telemetry centers, system logs overview.

When not to

UIs requiring a light aesthetic, or dashboards with only 3-5 nodes (looks best at 24+ nodes).

Working with an AI agent

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

Alter the count of grid cells to 24 by updating totalCells to 24 in JS, and adjust cells color by editing css colors. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • total nodes count (totalCells=30)
  • sweep scanline speed (bg02-sweep-anim 4s)
  • accent colors in CSS variables (--blue, --green, --red)
  • metric update frequency (1200ms in simulateMetrics)
  • ambient cadence (setInterval(rotate, 2200 ms) cycles the selected node; setInterval(simulateMetrics, 900 ms) ticks the metrics)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • visibilitychange sweep play-state control
  • prefers-reduced-motion scanline check
  • IIFE wrapper
  • ambient live-data loop (rotate/simulateMetrics intervals; paused on visibilitychange)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Grid layout is hardcoded to 6 columns by 5 rows, must change grid-template-columns for other totals

gridmonitortelemetryinteractiveclicksdashboarddatavizcybersecurity

More Business Graphics components

  • Funnel AnalysisInteractive conversions funnel stage chart with flow particles reacting to mouse hover.
  • KPI SparklineKPI metric cards featuring interactive, scrubbable sparkline trends on HTML5 canvas with custom tooltip tracking.
  • KPI Stat RowFour SaaS metric cards — MRR, active users, churn, net revenue retention — with count-up values, colored delta chips and trend arrows, updating with…
  • Activity FeedA live workspace audit stream: new events slide and fade in at the top with a colored initials avatar, an actor, an action (approved invoice, deployed…