Live page · scroll inside

PremiumEV charging network · dark · landing page · gsap · lenis · html

Amperline

An EV-charging-network site in charcoal with electric green and sky blue: an extra-wide headline over network figures and a filling charge line, a live map of ten hubs on a stroked city plan whose rings show free bays, a hub panel where charging bars fill, finish and free up (pause toggle), connector and speed filters, a your-car calculator for time and cost to 80 % on a tapering power curve, two prices with a monthly-miles check and a host-a-charger band.

What's inside

01
Wide-type bar
Turns translucent after 80 px.
02
Wide headline with network figures
H1 lines rise from masks; the figures count up; a thin charge line under the figures fills left to right.
03
Live network map with bay panel and car calculator
Charging bays fill continuously (a demo minute passes every 0.4 s), finish at 80–95 % and free up, and new cars arrive; pin rings follow the free-bay count; selecting a pin pulses it three times and crossfades the panel; filters dim hubs that do not match; the calculator recomputes on every change; the pause toggle freezes the live feed.
04
Two prices and a monthly-miles check
Results count; the cheaper row lights in the accent.
05
Host a charger
Figures rise in turn.
06
Minimal 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…

Amperline

What's inside

Wide-type bar

Turns translucent after 80 px.

Wide headline with network figures

H1 lines rise from masks; the figures count up; a thin charge line under the figures fills left to right.

Live network map with bay panel and car calculator

Charging bays fill continuously (a demo minute passes every 0.4 s), finish at 80–95 % and free up, and new cars arrive; pin rings follow the free-bay count; selecting a pin pulses it three times and crossfades the panel; filters dim hubs that do not match; the calculator recomputes on every change; the pause toggle freezes the live feed.

Two prices and a monthly-miles check

Results count; the cheaper row lights in the accent.

Host a charger

Figures rise in turn.

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