How Longshade Patios was made

The concept

A patio purchase is a square-metre purchase that most builders quote like a mystery. Longshade's whole personality is the opposite: the price does its maths in front of you. The signature Patio Planner erects a procedural SVG patio — stirrups, posts, beams, rafters, sheets — as you stretch the steppers, casts its 5pm shade across the paving, and prints the same honest arithmetic the services grid quotes. The art direction is a Canning Vale backyard at five in the afternoon: limestone paving in late light, Monument-grey steel, Deep Ocean sheets, the string line still up.

Palette

The ground + warm-accent combination is held away from the banned cream-and-terracotta default by giving the accent duty to painted-steel teal, setting the display face as an engineering grotesque, and keeping amber strictly secondary — every colour is argued from the build, not from taste.

Type

• Chivo (900) — display. A confident engineering grotesque for the masthead moment: "Shade that finally reaches the whole table."
• Mulish — body and UI. A warm, legible workhorse at ≥16px on mobile.
• Space Mono — every metre, square metre and dollar. The planner's steppers, dimension labels, price card and phone number all speak in mono, which is what makes the arithmetic feel measured rather than marketed.

The Patio Planner

The signature is a single buildScene() function that re-renders a 760×470 SVG on every state change. Projection runs along the screen x-axis (46 px/m, so the profile reads in true elevation) and length recedes obliquely (11,−7 px/m), which is what lets a gable read as a real peaked section against the house wall while posts, rafters and sheet strips multiply along the depth. Style chips swap the roof profile maths — flat is a level plane, skillion raises the wall attachment by P×10px, gable lifts a mid-projection ridge — and roofing chips swap the sheet fills: solid Deep Ocean with a lit/shadowed slope split, translucent polycarb that lets the rafters show through, pale insulated panel with a visible thickness edge. The 5pm shade is the roof footprint cast along a fixed sun vector (+1.35x, +0.3y per unit height), pulsing between 0.44 and 0.58 opacity — never below the 0.4 visibility floor — and reduced motion pins it at 0.5, settled and complete.

The erecting choreography is staged per group — stirrups, posts, beams, rafters, sheets, then the shade, then dimensions — with the first render given the full 0.94s stagger and every subsequent redraw switched to a fast path (0.24s transitions, 0.28s max delay, ~0.52s total) via a firstDraw flag, so stepper taps feel snappy rather than theatrical. Second-read details: the outdoor table sitting on the paving that the shade finally reaches (and at 3×3 m, doesn't quite), the amber string line still strung along the post line, and a magpie that lands on the ridge only for gables of 9 m or more.

The pricing model

One formula, no site-specific branches: total = max($4,800, round(length × projection × (style rate + roofing modifier))). The roofing modifier is deliberately flat across styles — a documented pricing statement on the card ("same modifier, whatever the pitch"), per the spec's secondary-meter rule. When the clamp engages, the card says why in words: the footings, engineering and approval cost the same whether the roof is small or generous.

Measured outputs (from the running page, verified against an independent oracle)

Every figure above was read from the driven page by a puppeteer harness and asserted against a pricing oracle re-implemented from the spec in separate code — the spec's two worked examples ($10,080 rest, $9,480 polycarb) both matched exactly, and the cheapest reachable output equals the $4,800 services floor.

Conversion decisions

• Planner beside the hero copy, not below it — the signature's SVG intersects the first 750px at 1200 wide, so the thumbnail and the first impression both carry the product and its price.
• Two CTAs above the fold at 375px — "Book a free design & measure" (form) and the tel: link, plus four trust chips; the mobile sticky bar repeats call + planner with ≥44px targets.
• Planner → form handoff: every planner change live-fills the form's style select and size field and prints the scenario (with its price) beside the submit button, so the enquiry arrives pre-qualified. Name, phone and suburb stay empty — the suburb names the council, which is a real intake question for a trade whose price includes lodgement.
• The approval band sits directly under the hero — building approval is WA patio-buying's defining fact, and being plainly right about it is the page's chief trust move.
• Local confirmation, honestly local: submit validates in the browser and renders a designed "Thanks — received… we'd call you back within one business day" state that says outright nothing was sent. No fake network round-trip.

Local SEO we'd implement for the real business

This demo page carries only WebPage schema naming it a demonstration — fictional structured data in a real index is dishonest markup. For a real patio builder we'd ship LocalBusiness + Review schema fed by their actual details and review stream:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://longshadepatios.com.au/#business",
  "name": "Longshade Patios",
  "description": "Colorbond patios & pergolas — designed, engineered,
    council-approved and built across Perth.",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Canning Vale",
    "addressRegion": "WA",
    "postalCode": "6155",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.058, "longitude": 115.918 },
  "areaServed": ["Canning Vale","Willetton","Thornlie","Harrisdale","Perth"],
  "openingHours": "Mo-Fr 07:00-17:00",
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "87"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Their real words, pulled from their real review feed."
  }]
}
</script>

Plus suburb-level service pages (patios Canning Vale / Willetton / Thornlie), a Google Business Profile wired to the same NAP, and FAQ schema on the questions above — the approval question alone is a featured-snippet magnet in WA.

What would change for the real client

• Buildxact — quoting and material takeoffs driven from the same style/size inputs the planner captures, so a web lead lands as a half-built estimate.
• Council lodgement tracking — PlanGate-style portal status surfaced to the customer ("your approval is at week 2 of 4"), turning the trade's slowest step into a communication asset.
• Stratco / supplier ordering feeds — sheet, beam and post orders generated from the sold drawing.
• ServiceM8 — site-measure scheduling straight from the form, with the planner scenario attached to the job card.
• Xero — progress claims (deposit / steel / completion) matching WA building-contract stages.
• Podium — the review flow that feeds the real schema above.
• Their photography would slot into the scene panel's position — though the procedural elevation would stay as the quoting tool, because it's the thing visitors play with.

Iteration log