Incident Alerting SaaS Template Template
A complete one-page SaaS landing site for an uptime monitoring and incident alerting product, built around a live alert wire: monitor events arrive on a timed stream, shunt the list down, tick the hero counters, and expand into incident detail cards on hover or focus.
About This Template
A production-ready one-page landing site for an uptime monitoring or incident alerting SaaS. The fictional brand is Klaxon: checks run from twelve regions worldwide, a failed check is confirmed before anything sounds, and on-call gets paged within seconds by Slack, SMS, or a phone call that keeps ringing. The art direction is a night-shift operations room: deep violet-navy ground, cool off-white ink, phosphor amber for anything live, and a single orange-red reserved for critical-severity marks. The console is the marketing page, and for a monitoring product the console is also literally the product.
The signature is the alert wire, and the wire is the hero. Monitor events arrive on a timed stream: each one slides in with momentum, shunts the rows below down, and recycles the oldest so the DOM stays capped. Every row is an alert: monitor name, check type, region code, latency or status figure, mono timestamp, and a severity chip from recovered through warning to critical. As a row lands, the hero counters tick: checks run today, incidents caught, and the median time-to-alert, which recomputes when a critical fires. Check-type channels (Uptime, Latency, SSL, Cron) retune the console, hovering or focusing any row expands it into an incident detail card with start time, region, response code, response-time trace and who acknowledged, and a pause control stops the stream, which is also where reduced-motion visitors start.
Below the console: a slow-drifting ticker of active incidents and recent recoveries that pauses on hover, a 30-day uptime board whose amber intensity encodes incident density, a noisiest-services leaderboard with bars that grow on scroll, a three-step method, two access tiers styled as console access cards, and a native-details FAQ.
To make it yours, rename the product, swap the fictional alert pool in one object at the top of the script for your own monitors and events, restate the uptime board and leaderboard numbers, and repoint the two CTAs at your signup flow. The whole scheme is six colours with RGB triples in one token block, and the page deploys as static files with no build step.
What's Included
- Complete deployable one-page site: nav, full-viewport console hero, active-incidents ticker, 30-day uptime board, noisiest-services leaderboard, method, pricing, FAQ, footer
- Signature alert wire: monitor events arrive on a timed stream with momentum, shunt the list down, and recycle the oldest so the DOM stays capped
- Three hero counters tick as events land: checks run today, incidents caught, and a median time-to-alert that recomputes when a critical fires
- Check-type channels (Uptime, Latency, SSL, Cron) retune the console: rows off the channel collapse out and matching arrivals refill the wire; hover and keyboard focus expand any row into an incident detail card with start time, region, response, trace and acknowledgement
- Three-tier severity system: recovered, warning and critical chips, with the critical red held to marks and washes so it never carries small text
- Pause and resume control on the wire, which doubles as the reduced-motion default state
- 30-day uptime board with four measured amber intensity tiers encoding incident density, uptime figures revealed on hover, focus, or always on touch
- Noisiest-services leaderboard with amber bars that grow to their share on scroll
- The wire ships with real rows in the markup, so without JavaScript the console reads as a complete plain list and nothing on the page is invisible
- Reduced motion gets the same console held still: stream paused, counters at final values, incident detail opening instantly, via both the CSS media query and the matchMedia branch
- Big Shoulders condensed signage for display, Mulish for reading, Sono in its monospaced default for every timestamp, hostname and figure
- Six-colour token block with RGB triples and a measured contrast table in the stylesheet header; a reskin is a token edit, never an rgba() hunt
- Sections are independent: every selector is guarded, so the ticker, uptime board, leaderboard or pricing can be deleted and the rest keeps working
- Lenis smooth scrolling wired in and fully optional, sharing one clock with ScrollTrigger; the wire panel scrolls natively
Perfect For
- Uptime monitoring, incident alerting and on-call SaaS products
- Observability, status page and infrastructure tool landing sites
- Security operations and threat monitoring services
- Any product whose best demo is watching real-looking events arrive in real time
- Learning pattern: timed DOM streams with GSAP, capped lists, and rolling counters
How It Works
Structure
One script initialises everything inside a single gsap.context, with gsap.matchMedia keyed on reduced motion plus a coarse-pointer flag, so exactly one motion branch runs on every device. Every querySelector is guarded, so any section, from the incident ticker to the whole pricing block, can be deleted and the rest keeps working. Reveal start states are double-gated behind a has-js class and the motion media query, so a blocked CDN or a reduced-motion preference both leave a complete static page.
The alert wire
A timed stream draws fictional alerts from a data pool keyed by check type, weights their severity so the wire reads plausibly routine, builds each row with createElement, and inserts it at the top of the list: the row's height tweens open to shunt the rows below down while its face drops in with back-eased overshoot. Each arrival advances the checks counter through a snap-rounded tween, counts warnings and criticals as caught incidents, recomputes the median time-to-alert on a page, fires one amber sweep across the panel, and culls the oldest rows past a cap so the DOM never grows. Channels retarget which pool the generator draws from, collapse out rows off the new channel, and deal a quick burst of matching arrivals.
Rows, hover and keyboard
Row interaction is delegated to the list, because rows come and go: mouseover and focusin expand a row's incident card by measuring its natural height and tweening to it, mouseleave and focusout collapse it, and coarse pointers get tap-to-toggle instead of hover. The open card overlays the rows beneath it rather than growing the list, so the console keeps a stable height, and a row near the bottom opens its card upward so it always stays inside the panel. Every generated row is a real button with aria-expanded, and the severity chips are ink on a wash because neither the critical red nor amber may carry text that small directly.
The uptime board
Board cells are buttons whose amber wash encodes 30-day incident density across four measured intensity tiers; the uptime figure inside reveals on hover and focus through CSS alone, and is always visible on touch, while the incident count stays on the cell in ink. Cells stagger in and the leaderboard bars scale from zero to their share when their sections arrive, both through once-only ScrollTriggers that tween exactly the properties the gated CSS start states set.
Without JavaScript
The markup ships with seven real alert rows, so with scripting off the console reads as a complete plain list with every incident card open, all counters at their final values, and the pause control honestly reading Paused. JavaScript only upgrades the page to the live version, and reduced motion keeps that upgrade but starts the stream paused with every tween replaced by an instant set.