Live page · scroll inside

FreePlumbing and heating · light · landing page · gsap · lenis · html

Plumbline

A plumbing and heating firm's site in chalk white, water blue and brass: a heavy statement beside a pipework photo with the next free slot, then a cutaway house that fills with water as you scroll past it, cold mains to stopcock and boiler, hot runs to the shower and basin, the heating loop to two radiators, with numbered markers and a legend lighting up part by part. Then a fixed-price service list beside a bathroom photo, staggered reviews and a water-blue emergency band.

Placeholder photos by Franck V. and Smart Renovations on Unsplash. Replace them with your own before launch.

What's inside

01
Brass bar
Solid after 80 px.
02
Statement and photo
Statement lines rise; the photo unrolls from the bottom; the chip slides up.
03
House cutaway with water filling the pipes
As the drawing scrolls through the viewport, water fills the pipes in order: the cold main from the street to the stopcock and boiler, cold branches to the kitchen tap and basin, hot runs from the boiler to the shower and basin, then the heating loop to both radiators. Each part's marker and legend item light up as water reaches it; radiators warm from grey to amber and a drop forms at each tap.
04
Services and prices
Rows rise in turn; the photo unrolls.
05
Reviews
Cards rise in turn.
06
Emergency band
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…

Plumbline

Placeholder photos by Franck V. and Smart Renovations on Unsplash. Replace them with your own before launch.

What's inside

Brass bar

Solid after 80 px.

Statement and photo

Statement lines rise; the photo unrolls from the bottom; the chip slides up.

House cutaway with water filling the pipes

As the drawing scrolls through the viewport, water fills the pipes in order: the cold main from the street to the stopcock and boiler, cold branches to the kitchen tap and basin, hot runs from the boiler to the shower and basin, then the heating loop to both radiators. Each part's marker and legend item light up as water reaches it; radiators warm from grey to amber and a drop forms at each tap.

Services and prices

Rows rise in turn; the photo unrolls.

Reviews

Cards rise in turn.

Emergency band

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.