Live page · scroll inside

Number 725, Template, Pro

Grid City

A product site at night for a fictional cloud and edge platform: a procedural three.js city of glass server towers (about a thousand instanced towers whose windows glow sodium amber, a few cyan, over wet streets that mirror them, cyan lanes on every street, light trails that run the street grid and turn at the corners, fog that swallows the tower tops) under the owner's aerial still. Scrolling flies one camera from the aerial view down to street level; on the way six regions go live one by one as their rollout cards come up, a scan climbing each district's towers; the tower under the pointer lights, sends a beam into the fog and shows its region, latency and load. Around it, the dense chrome of a shipped SaaS site: announcement bar, nav with a status badge, a live deploy panel in the hero, a logo strip, rollout cards with map pins, edge feature cards, a full-bleed latency band, a console mock with real screens (a dotted regions map, a 24-hour latency chart, a deploy log), three plans with a billing switch and a usage table, a changelog and docs block with a terminal, testimonials, FAQ, a closing CTA and a footer with an uptime card; five street lamps re-tint the page, the windows, the trails and the fog.

Unlock with Pro

PaletteSodium

Token sets re-tint the page live; the prompt carries the one you chose.

Kind: Template
Industry: Cloud and edge platform
Mood: NocturnalLuminousCinematic
Tone: Dark
Built with: three.jsGSAPLenisHTML
Prompt: 196 KB · html, next, react, vue, astro, wordpress, shopify, webflow
Licence: Commercial with Pro or Lifetime

What's inside

01
Boot preloader
The ring fills with load progress and the count reaches 48; it wipes up as the city's windows switch on from downtown.
02
Announcement bar
Static.
03
Product nav
Solid with a blur after 40 px.
04
City hero with a deploy panel
The city powers on; a tower under the pointer lights with a beam and a card; the panel is full on load and plays its rollout once (rows light in turn, districts flash, the last log line types on).
05
Rollouts
The camera holds over the districts; as each card comes up its district goes live (a cyan scan climbs its towers), the card turns from Queued to Rolling out to Live and its pin follows.
06
At the edge
The camera dives down the avenue to street level; light trails stream past on the wet street.
07
Latency band
The figures count on entry; from here the solid sections cover the canvas and the loop stops.
08
Console
Hovering a map node reads its region; the chart's crosshair reads p50 and p95 at any point; the chips switch region; Deploy highlights the newest row.
09
Pricing
The switch swaps the prices; cards rise in sequence.
10
Changelog and docs
Copy copies the two commands; links lift on hover.
11
Testimonials
Cards rise in sequence.
12
FAQ
Rows open and close natively.
13
Closing card
Reveals only.
14
Footer
The newsletter form answers inline.

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

3D assets: Grid City aerial backplate, a night city of server towers with cyan streets by Tileio (Generated for Tileio (Gemini, from ops/immersive/grid-city-prompts.md), Tileio), Grid City street level, a wet street between towers with a cyan light trail by Tileio (Generated for Tileio (Gemini, from ops/immersive/grid-city-prompts.md), Tileio), Grid City packet trail, a cyan streak along a foggy street by Tileio (Generated for Tileio (Gemini, from ops/immersive/grid-city-prompts.md), Tileio) and Grid City window grid, amber windows with a few cyan by Tileio (Generated for Tileio (Gemini, from ops/immersive/grid-city-prompts.md), Tileio).

How it works

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.

What's inside

Boot preloader

Announcement bar

Product nav

City hero with a deploy panel

Rollouts

At the edge

Latency band

Console

Pricing

Changelog and docs

Testimonials

FAQ

Closing card

Footer

How it works

Walk the page

Pick a palette

Pick your stack

Copy the prompt

Make it yours, then iterate

More like this

What's inside

Boot preloader

Announcement bar

Product nav

City hero with a deploy panel

Rollouts

At the edge

Latency band

Console

Pricing

Changelog and docs

Testimonials

FAQ

Closing card

Footer

How it works

Walk the page

Pick a palette

Pick your stack

Copy the prompt

Make it yours, then iterate

More like this