# Incident Alerting SaaS 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. Canonical: https://gsapvault.com/templates/incident-alerting-template Live demo: https://gsapvault.com/demos/incident-alerting-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £12 | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | timed-stream, counter, scroll-reveal, stagger, hover-effect, heatmap | | Uses Lenis | Yes | ## Overview 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. ## Features - 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 ## 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 ### 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### 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 ``: ```html ``` 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. 3. Make it yours: - Rename the product in the nav wordmark, hero, footer, `` 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. 4. For production, swap `assets/script.js` for `assets/script.min.js`. ### 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-label`s ("severity: critical"), so severity never relies on colour alone. - Uptime-board cells are buttons with full-sentence `aria-label`s; 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) ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium template. The standard license costs £12 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Incident Alerting SaaS Template](https://gsapvault.com/templates/incident-alerting-template) - [Effects & Templates Vault (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt