031
Optional AI setup

Incident Alerting SaaS Template

£10

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.

ScrollTrigger Lenis intermediate
6 more details
timed-streamcount-upscroll-revealstaggerhover-effectheatmap
Incident Alerting SaaS Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Incident Alerting SaaS Template demo in new tab

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 held in a muted register: a neutral graphite ground, neutral off-white ink, a single desaturated sand amber for anything live, and a dusty terracotta reserved for critical-severity marks. Nothing on the page carries hue but the accent. The console is the marketing page, and for a monitoring product the console is also literally the product.

Read the full template overview

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

14 items
  • 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 script's own motion 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

5 use cases
  • 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

5 sections

Structure

One script initialises everything with a single setup and teardown path, and one motion branch 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.

Plugins ScrollTrigger
Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Questions about this template

Are the incidents real monitoring data?

No. Events arrive on a timed stream from data in the page, shunting the list down and recycling the oldest so the DOM stays capped. The hero counters tick as they land and the median time-to-alert recomputes when a critical fires, but none of it is connected to a monitoring backend.

Can I connect it to my actual status data?

That is a developer job, and the structure is built for it: the wire is a capped, recycled list fed from one source, so replacing the timed array with a fetch or a websocket is a contained change. Nothing else on the page depends on where the rows came from.

Does the red severity colour cause contrast problems?

No, because it is held to marks and washes and never carries small text. That is a deliberate constraint on the three-tier severity system, and the six-colour token block ships with a measured contrast table in the stylesheet header so a reskin does not quietly break it.

What does someone see with JavaScript off?

A complete plain list. The wire ships with real rows in the markup rather than an empty container waiting to be filled, so nothing on the page is invisible. Under reduced motion you get the same console held still, with counters at their final values.

Can I use it for a product that isn't uptime monitoring?

Yes. Observability, status pages, security operations and threat monitoring all fit directly, and more broadly any product whose best demo is watching real-looking events arrive. The channels, uptime board and leaderboard are generic enough to re-label.

Paid template

Purchase to unlock the code.

Buying Incident Alerting SaaS Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

  1. Copy the whole folder to your web server (or any static host). There is no build step.

  2. The page works as-is. Open index.html and check the script tags before </body>:

Code snippet omitted: it ships with the download.

Lenis is optional: delete its tag and scrolling goes native. Without ScrollTrigger the scroll reveals are skipped and everything simply shows; the wire itself needs only GSAP core.

  1. Make it yours:

    • Rename the product in the nav wordmark, hero, footer, <title> and meta description.
    • Swap the WIRE object at the top of assets/script.js for your own monitors and events (see The alert wire below), and rewrite the seven static rows in the #top feed list to match.
    • Restate the uptime board cells (#board) and leaderboard rows (#services) with your services and numbers.
    • Point the CTA buttons (nav, hero, both access cards) at your signup flow; they currently anchor within the page.
    • Update the three hero counters if you change the wire's opening numbers: the script seeds itself from whatever the markup says.

  2. For production, swap assets/script.js for assets/script.min.js.

Sections

Every section is independent: the script guards each selector, so you can delete any of these wholesale and the rest keeps working.

Section id What to edit
Nav - Wordmark, anchor links, CTA target
Hero console #top Headline, sub, CTAs, the three counters, the seven static alert rows
Incidents now #incidents The .tick-item entries (state, service, description, figure; add is-live for an active incident)
The uptime board #board Board cells: service, uptime %, incident count, heat-1..4 tier, aria-label
Noisiest services #services Leaderboard rows: service, meta, alert count, and the --w bar width
How it works #method The three steps
Access #access Tier names, prices, feature lists, CTA targets
FAQ #faq Native <details> items
Footer - Contact address, small print

The alert wire

The signature. Everything it needs lives in two places in assets/script.js:

  • The WIRE object at the top: one entry per check-type channel (uptime, latency, ssl, cron), each with a label, monitor names, and event templates carrying a severity plus either a millisecond range or a literal figure. The generator composes rows from these pools, so swapping this object reskins the entire stream. The keys must match the data-channel attributes on the channel buttons and the data-kind attributes on the static rows. The severity mix is weighted in makeAlert() (15% critical, 27% warning, the rest routine) so the wire reads plausibly calm; an all-critical wire reads broken.
  • The dials inside the feed block: the stream interval is drawn from gsap.utils.random(2.4, 4.8) seconds in schedule(), and the DOM cap is state.cap (8 on desktop, 6 on coarse pointers). Raise the cap and the panel scrolls internally; the list has data-lenis-prevent so that scroll stays native.

How an arrival works: the row is built with createElement, inserted at the top, and its height tweens open, which shunts the rows below down. The row face drops in with back.out overshoot, one amber sweep crosses the panel, the counters advance through snap-rounded tweens, and rows past the cap collapse and are removed.

The counters seed themselves from the markup: whatever the [data-count-checks], [data-count-incidents] and [data-count-mta] elements contain on load is where the live values start, so the no-JS page and the live page always agree. Checks advance on every event, incidents on warnings and criticals, and the median time-to-alert recomputes when a critical fires.

Interactions: hovering or keyboard-focusing a row expands its incident card (tap toggles on touch). The open card overlays the rows beneath it rather than growing the list, so the console keeps a stable height; a row near the bottom of the window opens its card upward instead, which keeps the card inside the panel even for the last row. The channels retune the console (rows off the channel collapse out and a burst of matching arrivals refills the wire), and the pause control stops the stream and greys the live dot.

The uptime board

Each cell is a <button> whose class sets both its size and its heat:

Code snippet omitted: it ships with the download.

  • heat-1 to heat-4 set the amber wash intensity, encoding 30-day incident density; all four tiers are measured for ink text (see the stylesheet header). Match the tier to the incident count.
  • cell-xl (3 columns by 2 rows) and cell-l (3 by 1) size the anchors; unclassed cells are 2 by 1. Nine 2x1 cells fill exactly three rows of the 6-column grid, so keep the unclassed count a multiple of three when adding services.
  • The incident count shows at rest; the uptime figure reveals on hover and focus, and is always visible on touch. Keep the aria-label carrying the full sentence: it is what a screen reader gets.

Palette

The whole scheme is six colours in the :root block of assets/style.css, each with an RGB triple beside it:

Code snippet omitted: it ships with the download.

Change a hex, change its triple, and the site reskins: every translucent value (rules, washes, the board tiers, the sweep) derives from the triples, so nothing is left half-repainted.

Three constraints, all measured (the full table is in the stylesheet header):

  • The critical terracotta never carries small text: it sits at 4.37:1 on the ground. Critical chips are ink on an alert wash (9.60:1), warning chips ink on an amber wash (8.63:1); the terracotta itself only draws dots, borders and washes.
  • Text on uptime-board cells is always --ink (6.94:1 on the hottest tier); amber and --faint both fail there.
  • Amber fills (buttons, the active channel, the pro badge) carry --ground ink, never light type.

If you lighten --ground or --panel, re-measure --faint first: it is the small-print floor at 5.32:1 on the panel and the first token to fail.

Type

  • Big Shoulders does the display work: wordmark, headlines, section labels, channel chips. It is a condensed signage face, so generous letter-spacing is part of the look; if you swap it, revisit every tracking value.
  • Mulish does all reading text.
  • Sono (in its monospaced-feeling default) does the data: timestamps, counters, hostnames, latency figures, region codes. Keeping data in one face is what makes the console read as an instrument; resist giving it to headings.

All three load from Google Fonts in the <head> of index.html and thumbnail.html.

Accessibility

  • Respects prefers-reduced-motion via both the CSS media query and a gsap.matchMedia branch: the stream starts paused (the pause control says so honestly), counters hold their final values, incident detail opens instantly, reveals never hide, and Lenis is never created. Resuming the wire under reduced motion streams rows that simply appear, without tweens.
  • Fully readable with JavaScript disabled: the markup ships seven real alert rows with their incident cards open, and the script only upgrades the page to the live console.
  • Every alert row is a real <button> with aria-expanded; keyboard focus expands a row exactly as hover does, and tap toggles on touch devices. Severity chips carry spoken aria-labels ("severity: critical"), so severity never relies on colour alone.
  • Uptime-board cells are buttons with full-sentence aria-labels; their figures reveal on focus as well as hover and are always visible on touch.
  • All interactive elements have visible :focus-visible rings.
  • The alert list scrolls natively (data-lenis-prevent) with its scrollbar hidden, so a mouse wheel works inside it even with Lenis running. The incidents ticker drifts on its own and pauses on hover and keyboard focus; without JavaScript or with reduced motion it stays a plain scrollable row with a visible scrollbar.

Browser Support

Modern browsers (ES5-compatible script, CSS grid, custom properties). Not compatible with IE11.

Dependencies

  • GSAP 3.12+
  • ScrollTrigger plugin (optional; without it the scroll reveals are skipped and content simply shows)
  • Lenis (optional; smooth scrolling, and the site works without it)

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.