How the Stonewater Bathrooms demo was made

Concept

Owners of tired 90s bathrooms, pre-sale renovators, and downsizers wanting one good bathroom done properly. The direction is a stone showroom on paper: warm stone-white ground, procedural terrazzo flecks in the panels, brass tapware line-art, sea-glass tile lines — calm, magazine-spread spacing, so the page reads the way the finished room feels. The signature is the Reno Planner: an SVG bathroom elevation that redraws by package and size, with the computed price badged on the drawing itself.

Palette — argued from the stone bench and the brass tap

The ink/line split is deliberate: brass and sea-glass carry lines, fills and marks; small text always sits in slate ink (#2B2A28) or muted ink (#5C564C, 6.3:1). Where sea-glass appears as link text it is deepened to #31635C to clear 4.5:1.

Type

Cormorant Garamond 600/700 for display — the elegance of a stone showroom, and the face that sets the package price huge inside the drawn elevation ("$23,800 / fully finished" is the page's typographic moment). Mulish for everything workaday: labels, controls, body. Professional and legible beats expressive on a trade page; the serif carries all the personality the page needs.

The Reno Planner — signature implementation

The elevation is a single SVG rebuilt from state on every change: room shell, tile grid, fittings in brass line-art (vanity, mirror, shower), and the price badge — all generated as SVG nodes in JS, no raster anywhere. The refresh package keeps the layout: a half-height tile band at reduced opacity with a dashed brass "reseal" line, fittings swapped in brass. Full renovation retiles floor-to-ceiling: the tile columns run a perpetual sweep whose opacity floor is 0.55 — the hatching is visibly alive at any capture instant, never invisible. Premium adds the diagonal feature band, a terrazzo-pattern stone top on the vanity, and pulsing underfloor-heating glow lines beneath the slab. The freestanding bath is drawn with an adaptive width so it always fits between vanity and shower zone at any size from 4–10 m²; when it's off, a toilet takes the middle of the wall.

• Price on the artwork: the badge (white card, brass tick, Cormorant price) is part of the SVG scene, top-right on the tiling, so the 1200×750 thumbnail carries the commercial argument. On state change the price counts to its new value over 380 ms (cubic ease-out), token-guarded and disabled under reduced motion.
• Dual-speed redraw: first draw staggers elements at 26 ms/element (capped 1.5 s); every subsequent redraw runs 11 ms/element capped 520 ms via a firstDraw flag — package taps feel snappy, not ceremonial.
• Race safety: every control handler bumps the state token before mutating state; stale stagger timeouts and price tweens check the token and abandon themselves. A rapid-fire drive (ten clicks in one evaluate, no settle between) passes with the total matching an independent oracle.
• rAF hygiene: the sweep loop clamps dt = min(max(now − last, 0)/1000, 0.05) — zero-clamped and capped — pauses under document.hidden, and never starts under reduced motion (the settled frame renders all columns at full opacity).
• Second-read detail: when the freestanding bath is on, a faint outline of it appears reflected in the mirror.
• State probe: window.__bathrooms exposes scenario, every computed line, note/disable flags and a settled flag; QA gates on state, never on seconds.

Pricing model (binding anchors)

All figures are pure anchor arithmetic and integer-safe; every scenario above was measured from the running page and cross-checked against a reimplemented oracle in the harness. The planner's cheapest output ($8,900) equals the services grid floor. One builder-derived decision: the spec pins underfloor heating on full (+$1,600) and premium (locked ON, $0) but is silent for refresh — since heating lays under new floor tiles and a refresh keeps the floor, the toggle is disabled on refresh with the on-page reason "heating lays under new floor tiles, so it comes with a full or premium renovation" (the W18 disable-with-reason semantic, flagged for wave QA).

Conversion decisions

• Planner in the hero, form at the bottom, wired together. The planner is the first interactive thing on the page and pre-fills the enquiry form (package + size + summary line), so by the time a visitor reaches the form their scenario — and a price they've already accepted — travels with them. The confirmation copy replays it back with the figure.
• Above the fold at 375px: business name, "Bathroom renovations across Perth — one crew, start to finish", the quote CTA and the registered-builder trust line all land inside the first viewport; the sticky call/quote bar covers the thumb zone.
• Form fields: name, phone, suburb (the three we'd actually need to call back), package and size pre-filled from the planner, a timing select (pre-sale renovators self-identify), and "what's wrong with it now?" — the question that gets honest, detailed answers from bathroom owners.
• Honest controls: every threshold states its semantic — the sub-6 m² flat note, the bath toggle disabled on refresh with its reason, heating locked-on at premium with the $0 line itemised, and the layout-change toggle that prints a declaration instead of a number, beside the total and on the badge.
• Empty submit shows inline field errors and keeps the confirmation hidden; a valid submit shows a designed confirmation panel that names the demo honestly — no fake network round-trip.

Local SEO we’d implement for the real business

This demo page deliberately ships only WebPage/CreativeWork schema naming it a demonstration — fictional structured data in a real index is dishonest markup. For a real client we’d ship HomeAndConstructionBusiness (schema.org has no bathroom-renovation subtype; this is the correct organisation type for a renovation builder) with real NAP, geo, hours and genuine review markup:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Stonewater Bathrooms",
  "description": "Bathroom renovations across the Perth metro — refresh packages,
    full renovations and premium renovations, one crew start to finish.",
  "url": "https://www.stonewaterbathrooms.com.au",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Joondalup",
    "addressRegion": "WA",
    "postalCode": "6027",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.7444, "longitude": 115.7683 },
  "areaServed": "Perth metropolitan area",
  "openingHours": "Mo-Fr 07:00-16:00",
  "priceRange": "$8,900–$35,000",
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Renovation packages",
    "itemListElement": [
      { "@type": "Offer", "name": "Bathroom refresh", "price": "8900", "priceCurrency": "AUD" },
      { "@type": "Offer", "name": "Full renovation", "price": "19500", "priceCurrency": "AUD" },
      { "@type": "Offer", "name": "Premium renovation", "price": "28500", "priceCurrency": "AUD" }
    ]
  },
  "review": {
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "— real customer, real review feed —" },
    "reviewBody": "— pulled from the client's Google Business Profile, never invented —"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "— measured —",
    "reviewCount": "— measured —"
  }
}
</script>

Plus: Google Business Profile optimisation for "bathroom renovations joondalup / perth northern suburbs", suburb-level landing sections fed by real job photos, and review harvesting wired to the client’s actual feed.

What changes for the real client

• Their rooms, not our line-art: the SVG elevation stays as the quoting tool, but the page gains their finished-room photography and before/afters from real jobs.
• Quotes into their pipeline: the planner scenario posts into Buildertrend or Tradify as a structured lead (package, size, toggles, suburb) instead of a demo confirmation panel; site-visit booking through their calendar. For renovators running lead-gen volume, HiPages integration and a call-tracking number on the tel: links.
• Real reviews: the testimonial cards bind to their Google Business Profile feed with genuine Review/AggregateRating markup (see panel above).
• Real credentials: actual builder registration number, insurance certificates, and the waterproofing warranty terms as a downloadable PDF.
• Measured pricing: the package anchors become theirs, maintained in one config block the client can have updated in a phone call.

Iteration log