Concept 01 Interactive roofing experience

See the roof.
Understand the work.

Explore common problem areas, compare roof finishes and build a clearer brief before the site visit.

Roof repairs Re-roofing Long-run metal
Explore the roof Try the quote journey

Demo interaction · No personal details are collected or sent.

Interactive roof explorer

Drag horizontally or use the view controls
Preparing model

Drag to rotate · Left and right arrow keys also change the view

Charcoal finish, angle view, exterior layers, clear weather.

Roof finish
Angle
Layers

Illustrative view · Roofing systems and construction details vary.

Three entry points Plain language first

The job is easier to start when the site speaks the customer’s language.

A real roofing website should help someone recognise their situation before asking them to fill in a generic contact form.

01
Detailed charcoal metal roofing and flashing at a repaired roof junction
Illustrative concept imagery

Roof repairs

Leaks, damaged sheets, flashings and roof-edge issues—organised into a brief a contractor can act on.

Explore the repair path
02
A weathered residential roof transitioning into newly installed charcoal metal roofing
Illustrative concept imagery

Re-roofing

Help homeowners understand the decision, then collect roof type, priorities and timing before a site visit.

Plan a re-roof
03
Close architectural view of a finished charcoal long-run metal roof
Illustrative concept imagery

Long-run metal

Compare generic profiles and finishes in context without turning the page into a technical catalogue.

Compare finishes

Roof anatomy Built in layers

The finish is only the surface.

A professional roofing story should make the hidden system understandable without drowning a homeowner in trade jargon. This diagram turns the explorer’s cutaway into three clear decisions.

  1. 01
    Weather surface

    Profile, folded edges, fixings and flashings work as one outer skin.

  2. 02
    Water control

    Membranes and junction details manage the moisture that gets beneath the finish.

  3. 03
    Structure

    Battens, sheathing and rafters create the stable plane underneath.

Open the live cutaway
EXPLODED SYSTEMThree layers · one roof
Illustrative roof-system study · Construction details vary by project and specification.

Problem locator Mirrored outside the canvas

Show us where the problem starts.

Choose an area below. The same information remains available whether the 3D model loads or not.

Stay on the ground. Never climb onto a roof to complete an online form. Any photos should be taken only from a safe ground-level position.

Selected area 01 / 04

Roof surface

Choose this when the visible issue sits across the main roof plane: damaged material, corrosion, impact damage or general wear.

What would the roofer ask next?

Demo quote journey Nothing leaves your browser

A better enquiry starts before the phone rings.

This example gathers only the decisions that shape a useful first conversation. It asks for no name, phone, address, email or photo.

  1. 01
    Describe

    Choose the issue in plain language.

  2. 02
    Locate

    Mark the relevant roof area.

  3. 03
    Prepare

    Add roof type and timing.

  4. 04
    Visit

    A real contractor verifies the scope on site.

Step 1 of 3
What brought you here?

Pick the closest option. There is always room to clarify later.

Where does the problem appear?

Use what you can observe safely from inside or at ground level.

What do you know about the roof?

Two simple details help a contractor prepare for the site visit.

Honest proof Trust architecture

Proof before promises.

Trade websites should earn trust with real evidence, not invented badges. This concept deliberately fabricates none.

01

Project evidence

Client supplied

02

Credentials

Client supplied

03

Warranty terms

Client supplied

04

Verified reviews

Client supplied

Two layers One useful website

The layer people explore.
The layer AI can read.

The 3D earns attention. Semantic HTML, clear service paths, verified business data and useful answers make the real site findable. The canvas never carries the only copy or call to action.

EntityRidge & RainConcept only
ServicesRepair · Re-roofing · MetalClear
Service areaNot inventedHonest
ProofClient suppliedRequired
Page typeCreativeWork demoDeclared

Premium scope Clear commercial chain

Custom interaction is quoted separately.

NextRank’s standard full-package sites start at $997 NZD. A custom Three.js experience like this roof explorer requires interaction design, 3D production, performance work and device testing, so it is scoped and quoted separately.

You receive one fixed quote for the agreed work before we begin.

Scope an interactive build Start with a standard trade site

Demo FAQ Straight answers

Before you ask.

Is Ridge & Rain a real roofing company?

No. It is a fictional concept built by NextRank to demonstrate an interactive trades website. No roofing services are offered and no enquiry is sent to a contractor.

Does every trade website need 3D?

No. It earns its place here because it helps a homeowner identify an area and understand the quote journey. Where interaction does not help the customer decide, a faster and simpler build is the better choice.

Will the essential page work without WebGL?

Yes. Every service, explanation and call to action remains normal HTML. The roof explorer falls back to a static architectural view.

Is this included in the $997 package?

No. Standard full-package sites start at $997 NZD. Custom Three.js scenes, 3D models, configurators and visualisers are premium production work and are quoted separately.

Your next move Standard or interactive

Want the trade site underneath this—or the full interactive build?

We can build the fast, answer-ready website first, or scope a custom experience around the way your customers choose and enquire.

Build my trade site Talk through the 3D idea
No sales call unless you want one · Fixed quote before we start

NextRank Trade Lab · Build notes

Behind the demo Why each layer exists

Impressive on the surface. Useful underneath.

01

Customer experience

The roof model turns an unfamiliar technical service into a visual, low-pressure first step.

02

Conversion logic

Problem, location, roof type and timing create a cleaner brief before contact details are requested.

03

Machine-readable layer

All services, answers and actions remain semantic HTML. The canvas is never the only source of meaning.

04

Performance plan

One lazy-loaded canvas, procedural geometry, capped resolution, reduced-motion support and offscreen pausing.

Premium interaction is quoted separately. Start with the standard trade site, or scope the complete interactive experience.

Build my version