Live page · scroll inside

PremiumAI agent platform · dark · landing page · gsap · lenis · html

Relay

An AI agent platform site in warm graphite with amber wires: a wide statement hero with counting figures, a pinned workflow graph whose nodes and wires assemble as you scroll and then run, streaming a typed task log while a packet travels each wire and the review gate holds for a human, a text-led tool index that opens example calls, guardrails written as policy code with blocked counts, a per-step pricing table and a wire-drawn CTA.

What's inside

01
Wire bar
Turns solid after 80 px; link underlines draw on hover.
02
Wide statement hero
Headline lines rise from masks; figures count up.
03
Self-wiring workflow + run log
Pinned for 1,400 px: nodes pop in order and their wires draw as you scroll; at the end of the pin the run starts: the log streams line by line (typed), each node lights while it works and a packet travels down the wire into it; the review gate holds for 1.2 s; totals tween.
04
Tool index
Rows rise with a stagger; hover or focus slides the row's example in and tints the family name.
05
Guardrails as code
Rows rise in sequence as they enter; the counts tick up.
06
Priced per step table
The table rises as one block.
07
Wire-drawn CTA
The wire draws across when the band enters.
08
Ledger 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…

Relay

What's inside

Wire bar

Turns solid after 80 px; link underlines draw on hover.

Wide statement hero

Headline lines rise from masks; figures count up.

Self-wiring workflow + run log

Pinned for 1,400 px: nodes pop in order and their wires draw as you scroll; at the end of the pin the run starts: the log streams line by line (typed), each node lights while it works and a packet travels down the wire into it; the review gate holds for 1.2 s; totals tween.

Tool index

Rows rise with a stagger; hover or focus slides the row's example in and tints the family name.

Guardrails as code

Rows rise in sequence as they enter; the counts tick up.

Priced per step table

The table rises as one block.

Wire-drawn CTA

The wire draws across when the band enters.

Ledger 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.