∞ forever components

Dev Status

Status Page

A public service status page: six services, each with an Operational state pill and a compact 90-day uptime strip carrying past-incident marks; on a loop one service briefly goes degraded (amber) and recovers, while the header banner tracks 'All systems operational'.

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

Status/health pages, uptime dashboards, incident summaries, DevOps or SRE overview panels, trust/status marketing sections.

When not to

When you need real-time data wired to a monitoring backend, per-minute granularity, or a full incident timeline with post-mortems — the states and 90-day history here are simulated.

Working with an AI agent

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

Edit the services array (name, up, inc incident marks with day 0-89 and severity warn/err) to set your own services and history; adjust the loop timings (degrade 2600ms, gap 3600ms) for the auto incident cycle. Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent, --pro-warn, --pro-err), and update the catalog bg field to match. 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

  • theme tokens (:root --pro-bg, --pro-surface, --pro-border, --pro-text, --pro-muted, --pro-accent)
  • service data (services array: name, up percentage, inc incident marks {day 0-89, severity warn/err})
  • incident cycle timing (setTimeout: 2600ms degraded, 3600ms gap, 2800ms initial delay)
  • uptime bar look (--stpg-ok / --stpg-track tokens, .stpg-bar height and 90-bar background-size)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • :root --pro-* token block (renaming breaks the shared pro theming API)
  • role=img + aria-label on .stpg-stage
  • IIFE wrapper
  • prefers-reduced-motion early return to the populated all-operational state
  • visibilitychange pause (running flag + .paused class on stage)
  • the 90-day bar as a tiled linear-gradient (background-size:calc(100%/90)) rather than 90 DOM divs per row
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
  • States and 90-day uptime history are simulated on a loop, not wired to a live monitoring source
  • The 90-day strip shows one bar per day at fixed granularity; sub-day or hourly detail is not represented

status-pageuptimemonitoringincidentsladevopshealth-checkdashboard

More Dev Status components

  • Release ChangelogA release changelog feed: dated semver cards stream in at the top of a thin vertical timeline rail with connecting dots, each listing Feature (green), Fix…