Live page · scroll inside

FreeUptime monitoring and status pages · dark · landing page · gsap · lenis · html

Pulse

An uptime-monitoring site in night green-black with signal green, amber and red: the hero is a customer's live status page, six services with 90-day bar strips you can hover or arrow through, while an incident plays out (Investigating, Identified, Monitoring, Resolved) and moves the banner, the service state and today's bar with it, with pause and replay. Then a per-region request waterfall, plain-language alert routing rules, a comparison pricing table and a green URL band.

What's inside

01
Ping-mark bar
Solid after 80 px.
02
Live status page hero
When the frame enters view an incident plays out: Investigating, Identified, Monitoring, Resolved, 2.8 s apart. Each update drops in at the top of the timeline, the banner and the Payments API state change with it, and today's bar shifts from red to amber. Pause holds the sequence; Replay restarts it. Hover, tap or arrow-key a day to read it.
03
Check waterfall
Waterfall rows grow from the left one after another; numbers count up.
04
Alert routing rules
Rules rise in sequence.
05
Comparison table
Table rises.
06
Green URL band
Heading lines rise.
07
Footer
None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
05
Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.

More templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Pulse

What's inside

Ping-mark bar

Solid after 80 px.

Live status page hero

When the frame enters view an incident plays out: Investigating, Identified, Monitoring, Resolved, 2.8 s apart. Each update drops in at the top of the timeline, the banner and the Payments API state change with it, and today's bar shifts from red to amber. Pause holds the sequence; Replay restarts it. Hover, tap or arrow-key a day to read it.

Check waterfall

Waterfall rows grow from the left one after another; numbers count up.

Alert routing rules

Rules rise in sequence.

Comparison table

Table rises.

Green URL band

Heading lines rise.

Footer

None.

How to use it

From prompt to a live page.

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

Make it yours, then iterate

Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.