∞ forever components

Business Graphics

Grid Monitor

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

cssmedium complexitymoderate motionclickmobile-ready

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

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)
  • First node selection stops rotating selection and telemetry drift; selected metrics remain.
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

Known limitations

  • Grid layout is hardcoded to 6 columns by 5 rows, must change grid-template-columns for other totals
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

gridmonitortelemetryinteractiveclicksdashboarddatavizcybersecurity

More Business Graphics components

  • Funnel AnalysisInteractive conversions funnel stage chart with flow particles reacting to mouse hover.
  • KPI SparklineKPI cards with touch-scrubbable canvas sparklines.
  • 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…