Generative Assets · Industry Demos XXX · site 362

How the Laneway Living demo was built

A fictional Rockingham granny flat and backyard studio builder, built as a one-page conversion demonstration — the page a real builder would put in front of a Baldivis family bringing a parent closer, a Secret Harbour owner after a rentable one-bed, or a Kwinana block with room for a studio office. One job: a site-survey request with the size, cladding and extras already priced, and the honest weeks-on-site figure beside the number. Back to the site · Index.

Concept

Laneway Living sells a second home one fence away: studio, 1-bed and 2-bed flats built turnkey — design, council lodgement, slab to handover clean — as one GST-inclusive number. The page's single conversion is the free site survey. The signature, the Flat Planner, lets the visitor draw their flat and see it priced before they give a phone number, then carries the plan into the survey form so the lead arrives warm. Every price on the page comes from one pinned anchor table, and the planner's cheapest result for each size is exactly the "from" price on the services grid.

The Flat Planner

A drawn SVG front elevation at the back fence: a skillion Colorbond roof in ironstone, a drawn entry door (numbered 362 — the second-read detail), window bays, a slab line, the main house's gable faint behind, a fence in front with the price sign standing on its posts, a gum whose leaf clusters sway and a cloud that drifts behind the gable. The size chip widens the flat — studio is a door and one window bay, 1-bed adds a bay, 2-bed adds a third bay and a door sidelight — with the floor area cast small under the slab. The cladding chip swaps the wall pattern: vertical corrugation for Colorbond, a smooth fill with a dashed expansion joint for render, drawn courses for face brick. Toggles draw their marks: a full kitchen adds a rangehood flue through the roof and a sink window, the veranda adds a posted lean-to fascia and deck boards, and the split system adds a wall head inside a window and a condenser on the slab (two units stacked on a bracket for the 2-bed, which draws two heads).

The price sign carries two lines plus the declaration: the turnkey total, "about N weeks on site after approval" (always present), and "+ site works & service runs, quoted after the survey" — the footnote appears wherever the total does: sign, ledger and the plain-text mirror under the ledger. On the 2-bed the sign adds the lot-size note; the ledger and mirror always carry the full sentence, the sign carries it in full from 641 px up and in its pinned short form at phone widths, where the sign docks beneath the elevation instead of standing on the scene.

The pricing model (pinned anchors, GST-inclusive turnkey)

Rules shipped as pinned: cladding multiplies the size's floor area; air con multiplies the size's unit count and carries its on/off across size chips, repricing $2,600 ↔ $5,200; kitchen, veranda and the lump sum are flat. On the 2-bed the kitchen toggle is forced on and disabled with its reason on-card, and stepping back to a studio or 1-bed restores the visitor's prior choice — on at $9,500 or off — not a reset. The lot-size note is a suggestion, never a lock: "most councils want a 450 m² lot or more behind a 60 m² flat — we confirm yours on the survey" (phone form: "2-beds usually need a 450 m²+ lot — we confirm on the survey"). Every cell is integer-safe by construction, so totals display to the whole dollar with no rounding decision.

Worked figures (all measured from the running page and cross-checked against an independent oracle)

Palette — render, ironstone, woodland grey

Argued from a fresh rendered wall, a Colorbond Ironstone roof at dusk, Woodland Grey gutters and the charcoal ink of a framing plan. Contrast was measured with WCAG arithmetic from the shipped hex values; nothing needed the two-token remedy because the spec had already split the woodland line colour from a darker woodland ink for small copy.

Type

Space Grotesk 600 for display — a plan-drawing grotesk with a drafting feel, set tight for the h1 and huge for the "15 weeks on site, one fence away" moment, which is the rest-state weeks line and would be re-derived if the rest state ever changed. IBM Plex Sans for everything else: a workhorse with enough character in its numerals to carry the ledger and the sign. Body is 17 px on every width; nothing below 13 px except the sign's fine lines, which sit on charcoal at ≥8.8:1.

Techniques

• SVG elevation, string-built per state. The flat is one <g> rebuilt from the pricing result: geometry derives from the bay count, so the wall, roof polygon, door, sidelight, windows, flue, sink window, veranda fascia and posts, condensers and the m² cast are all coordinate arithmetic. Cladding is three <pattern> fills in user space so corrugation and brick courses stay aligned as the wall widens. The backdrop (sky, cloud, gable, gum, fence) is static markup, so the sway loop never holds a stale reference.
• Alive at rest. A single rAF loop with the delta clamped at zero and capped at 50 ms rotates four leaf clusters (two summed sines, different phases) and drifts the cloud; it pauses on document.hidden. Reduced motion skips the loop and sets a settled afternoon — a gentle lean and the cloud mid-drift — with no entrance transitions.
• Dual-speed redraw. The first draw staggers parts at 26 ms (cap 1.5 s); every later state change staggers at 11 ms (cap 520 ms). Each handler bumps a draw token before swapping state, and the settle timer only flips window.__grannyflats.settled if its token is still current, so a rapid chip burst lands on the last state with every part at full opacity.
• Phone crop. Below 641 px a matchMedia listener swaps the scene's viewBox to the flat zone (300 40 560 380) so the elevation reads at 375 px, while the sign docks beneath the artwork inside the planner card.
• State probe. window.__grannyflats exposes size, cladding, the effective and chosen kitchen states, unit counts, every line, the total, weeks, note flag and settled; QA gates on it rather than on seconds.
• No libraries. Google Fonts only. No raster anywhere — the map, the icons and the scene are inline SVG.

Conversion decisions

• Above the fold at 375 px: wordmark, the value proposition naming trade and area as the h1, the survey CTA and the tel link, and three trust marks (registered-builder pattern, 6-year warranty, est. 2014) — before the planner.
• Survey over quote. A granny flat is never sold from a website number, so the CTA is the free site survey; the planner's total is framed as turnkey with the site works declared separately, and the ledger spells out what is in the lump sum so the number is believed.
• Form fields: name, phone, suburb (the builder's first question), a block-size select because lot size decides whether a 2-bed is even possible, a who-is-it-for select because family, rental and office flats are designed differently, and a pre-filled plan textarea the planner keeps in sync until the visitor edits it. Front-end validation with per-field messages, a v-flag-safe phone pattern, and a local confirmation panel hidden on load and on an invalid submit, shown only after a valid one — no fake network round-trip.
• Sticky call/survey bar below 768 px; tel in the masthead at every width; the disabled kitchen toggle explains itself on-card rather than silently no-oping.
• Honesty on the page: reserved (08) 9000 0362 number, placeholder ABN and BC patterns, suburb-level address, reviews labelled demonstration copy, council caps and rental rules hedged to "your council", and site works priced as a declaration, not a guess.

Local SEO we'd implement for the real business

This demo page ships only WebPage and BreadcrumbList structured data naming it a demonstration, because fictional business schema in a real index is dishonest markup. For the real builder we would ship the following, fed from their actual reviews feed and registration details:

{
  "@context": "https://schema.org",
  "@type": "GeneralContractor",
  "name": "Laneway Living",
  "description": "Granny flats and backyard studios built turnkey across Rockingham, Kwinana and Perth's south coast.",
  "url": "https://www.example-builder.com.au/",
  "telephone": "+61 8 9000 0362",
  "image": "https://www.example-builder.com.au/og/flat-elevation.jpg",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Rockingham",
    "addressRegion": "WA",
    "postalCode": "6168",
    "addressCountry": "AU"
  },
  "areaServed": ["Rockingham", "Baldivis", "Kwinana", "Secret Harbour", "Port Kennedy", "Safety Bay", "Cockburn", "Lakelands"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "07:30", "closes": "16:30" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Granny flats",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Studio granny flat, 35 m²" }, "priceSpecification": { "@type": "PriceSpecification", "price": "109000", "priceCurrency": "AUD", "valueAddedTaxIncluded": true } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "1-bed granny flat, 45 m²" }, "priceSpecification": { "@type": "PriceSpecification", "price": "139000", "priceCurrency": "AUD", "valueAddedTaxIncluded": true } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "2-bed granny flat, 60 m²" }, "priceSpecification": { "@type": "PriceSpecification", "price": "179000", "priceCurrency": "AUD", "valueAddedTaxIncluded": true } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "38" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "Customer name from the reviews feed" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Pulled from Google Business Profile via the reviews integration, never hand-typed."
    }
  ]
}

Alongside the schema: a Google Business Profile tuned to "granny flat builder Rockingham", suburb landing sections for Baldivis, Kwinana and the coast, the FAQ marked up as FAQPage once the answers are the builder's own, and the site-survey form posting to their CRM with UTM capture.

What changes for the real client

• Their flats. Photographs of finished builds replace nothing structural — the drawn elevation stays as the planner, photos join the services grid and reviews.
• Their numbers. The anchor table is loaded from Buildxact estimating so the planner's lump sums and per-m² rates track their live cost book, with a "valid to" date printed on the sign.
• Their pipeline. The survey request posts to a CRM pipeline — Pipedrive or HubSpot, whichever they run — with the planner's JSON attached, and books into a site-survey calendar (a Calendly- or Microsoft Bookings-style slot picker) in the confirmation panel instead of "we'd call you back".
• Their approvals. The lodgement step links to the relevant council ePlanning portals (City of Rockingham, City of Kwinana, City of Cockburn, City of Mandurah) with their real current turnaround, and deposits flow through Xero invoicing.
• Their proof. Live Google reviews via the reviews feed, the real BC registration number and ABN, HIA membership and indemnity insurer named, and the would-ship schema above.

Iteration log

• Pass 1 — Craft

  • First render put the price sign bottom-right over a 760-wide viewBox, hung from the fence: at 1200 it covered the 1-bed's right window bay and downpipe, and at 1000 px (the two-column planner is 541 px wide) the badge's bounding box collided with the m² cast — the harness caught the 1000 collision, the screenshot caught the coverage. Recomposed the scene at 860 × 420: flat zone centred at x = 625, the sign standing on two posts in front of the fence at the LEFT, the gum behind it, the main-house gable faint behind the flat, cloud drifting behind the gable's right slope. Sign shrunk to 28 px total / 13 px lines; both condensers stack on a bracket at the flat's left so a 2-bed never pushes a unit under the sign. Re-measured: 1200 and 1000 both clear the cast, condenser and flue; the rest sign sits at page y 259–420, inside the 750 px thumbnail.
  • Contrast measured from shipped tokens (see palette): every pair ≥ 4.58:1, with woodland grey restricted to large chip labels and lines exactly as the spec argued; small grey copy uses #4F554E at 7.0:1.
  • Copy read: the veranda is described as a decked landing off the front wall (not "on the slab" — the deck sits on bearers), and the weeks copy says "counted from the day we pour, not the day you sign" so no reader mistakes weeks-on-site for calendar weeks; the FAQ answers the rental question with "it depends on your council" rather than a promise.
  • Window bays tightened from 85 to 80 units with 58-unit glass so the 2-bed's three bays plus sidelight keep margin to the sink window and downpipe.

• Pass 2 — Depth

  • Phone crop: at ≤640 px the scene's viewBox swaps to the flat zone so the elevation is ~2× larger at 375 (the 1-bed reads at 196 px instead of 121 px), with the sign docked beneath it. Size and cladding chips become a three-column segmented grid at phone widths instead of wrapping 2 + 1.
  • Second-read details: the door carries the number 362 (the site's collection number), the sign board has four fixing screws, and the 2-bed's second condenser sits on a drawn bracket above the first.
  • Keyboard: arrow keys move the size and cladding radio groups; the planner's "Book a survey for this flat" button re-syncs the pre-fill, scrolls to the form and focuses the name field.
  • Mid-width check at 1000 px: the two-column hero leaves the planner 541 px wide, and the three-across extras toggles wrapped "Veranda 12 m²" onto two lines — the toggles now stack in the 980–1099 px band and sit three-across only below 980 (single-column hero) and from 1100 up. The sign on the scene at 1000 clears the flat, cast, condenser and flue.
  • Services grid re-flowed so the site-works declaration card spans two columns beside the kitchen upgrade at ≥1000 px instead of a lonely third row.
  • Sway motion refined to two summed sines per cluster (0.75 Hz and 1.9 Hz, ±2.4° and ±0.6°) so the gum reads as wind, not a metronome; the cloud drifts ±26 units over ~57 s.

• Pass 3 — Hardening

  • 375 px masthead: wordmark right edge 182 px vs call button left edge 196 px, book button right edge 352 px — no collision, no overflow (scrollWidth 375, zero offenders outside scrolling ancestors). Sticky call/survey bar with the tel link in the bottom 140 px; h1, CTA and trust line all inside the first 740 px.
  • Drove every control in every pass: all seven worked examples plus the forced-kitchen restore-ON and restore-OFF sequences, the air-con reprice in both directions, a disabled-toggle click no-op, two rapid-fire bursts (chips and toggles in one evaluate), the keyboard arrow path, empty submit (five invalid fields, panel hidden, focus to the first bad field), filled submit (panel shown with recap), a bad-phone pattern rejection, and the reduced-motion path (no loop, parts settled at opacity 1, redraws land immediately). 159 of 159 asserts green at the final run, zero console errors on every viewport, including the v-flag phone pattern.
  • Label-collision sweep at native resolution on 375 / 1000 / 1200 for rest and 2-bed: the sign never intersects the m² cast, condensers or flue; at 375 the short note form is on the sign while the ledger and mirror keep the full sentence.
  • Rest-state thumbnail at 1200 × 750 after a 7 s settle: scene at y 98–420, sign at y 259–420, sway loop alive, $172,100 / about 15 weeks on the board, no scroll.
  • Chanel rule: removed the hanging straps from the sign (the two posts do the job) and the sign's separate hang element with them. Final copy read in Australian English; both pages carry the fictional-business colophon, one h1 each, the index and guide links, and this guide's tables sit in .table-scroll wrappers.

Laneway Living is a fictional business — a granny flat builder industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Back to the site · Index.