Live page · scroll inside

PremiumAI fraud & security · dark · landing page · gsap · lenis · html

Vigil

A real-time fraud-scoring site in deep navy with cyan and alarm red: a hero radar that sweeps eight payment sectors while a live transaction stream fills beside it, every blip getting its verdict as the beam passes (risky ones ringed in red and held with a reason), a numbered index of the four signals with drawn mini charts, a case file of a mule ring with a scroll-filled timeline, a request/response API card and a retro-review form.

What's inside

01
Shield bar
Solid after 80 px.
02
Radar and stream hero
The sweep turns once every 4 s with a fading wedge; each new transaction drops a blip on its sector at its score radius and a row slides into the top of the stream as 'Scoring'. When the sweep crosses a blip it brightens; risky ones get a red ring that pings outward and their row flips to 'Held' with the reason, the others to 'Approved'. A new transaction arrives every 0.9 s. The pause control (and leaving the viewport) freezes both.
03
Signal index
Rows rise in sequence; each chart's line draws when the row enters.
04
Case file
Timeline entries rise as they enter; the rail fills down to the current entry as you scroll.
05
One call API
The code card rises; tabs switch with a short fade.
06
Review request
The band rises.
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…

Vigil

What's inside

Shield bar

Solid after 80 px.

Radar and stream hero

The sweep turns once every 4 s with a fading wedge; each new transaction drops a blip on its sector at its score radius and a row slides into the top of the stream as 'Scoring'. When the sweep crosses a blip it brightens; risky ones get a red ring that pings outward and their row flips to 'Held' with the reason, the others to 'Approved'. A new transaction arrives every 0.9 s. The pause control (and leaving the viewport) freezes both.

Signal index

Rows rise in sequence; each chart's line draws when the row enters.

Case file

Timeline entries rise as they enter; the rail fills down to the current entry as you scroll.

One call API

The code card rises; tabs switch with a short fade.

Review request

The band rises.

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.