Live page · scroll inside

PremiumRoofing contractor · light · landing page · gsap · lenis · html

Roofline

A roofing contractor's site in stone, slate and rust: a giant condensed headline over a wide slate-roof photo with three facts on an overlapping bar, then an isometric roof build-up whose six layers (rafters, sarking board, membrane, counter battens, battens, Welsh slates) start exploded apart and drop onto each other as you scroll, with an Explode/Assemble toggle and a spec list that lifts each layer on hover. Then recent roofs in a photo-and-text grid, six repair prices in big condensed numerals and a rust survey band.

Placeholder photos by Einar Storsul, Pete F and T on Unsplash. Replace them with your own before launch.

What's inside

01
Ridge bar
Solid after 80 px.
02
Condensed headline over a wide photo
Headline lines rise; the photo unrolls; facts rise.
03
Exploded roof build-up that assembles
As the section scrolls into the middle of the screen the layers drop onto each other from the rafters up, ending as one finished roof section. The button explodes or assembles it again. Hovering or focusing a layer in the list lifts that layer and dims the rest.
04
Recent roofs
Cards rise; photos unroll.
05
Repair prices
Items rise in turn.
06
Survey 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…

Roofline

Placeholder photos by Einar Storsul, Pete F and T on Unsplash. Replace them with your own before launch.

What's inside

Ridge bar

Solid after 80 px.

Condensed headline over a wide photo

Headline lines rise; the photo unrolls; facts rise.

Exploded roof build-up that assembles

As the section scrolls into the middle of the screen the layers drop onto each other from the rafters up, ending as one finished roof section. The button explodes or assembles it again. Hovering or focusing a layer in the list lifts that layer and dims the rest.

Recent roofs

Cards rise; photos unroll.

Repair prices

Items rise in turn.

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