Generative Assets · site 250 · how it was made

Sandgroper Reticulation — build guide

A conversion-first landing page for a fictional Canning Vale reticulation contractor: retic repairs, new systems, Wi-Fi controllers and bore pumps for lawns grown on Perth sand. The audience is a homeowner whose lawn browns off every February; the page's single job is to book a repair or start an install estimate. Everything on the page is procedural — SVG, gradients and CSS; no raster images.

The concept

Perth is the only Australian capital where "reticulation" is the everyday word for a sprinkler system, and the trade lives by rules nobody else has: two watering days on mains, three on a bore, sprinklers off from June to August. The demo leans into that — the signature Zone Planner prices the job and quotes the real Water Corporation roster, because a retic firm that programs your legal days into the controller before leaving is selling exactly the trust this page needs to convert. Mood: a suburban front yard at 6am on a watering day — arcs catching low sun, nothing tropical about it.

Palette — argued from the 6am yard

The ink/line split from the collection's playbook: spray blue and bore iron are marks, never copy. Buttons in spray blue carry near-black blue text (#0E2B36) at ~5:1.

Type

• Gabarito (display) — friendly rounded geometry, a suburban wave over the fence. The masthead's double-decker brand block is the page's one typographic flourish.
• DM Sans (body/UI) — plain-spoken and legible at 16px+ on a phone in one hand.
• Spline Sans Mono (zones, litres, rosters, prices) — every number on the page is set in mono so estimates read like a meter, not marketing.

The signature: the Zone Planner

A procedural SVG top-down yard — house, garage, driveway, front and back lawns, beds, verge, footpath and road — with four zone chips, a job selector (repair / new system / controller upgrade / bore pump), and a mains/bore source toggle. Selected zones light up: pop-up heads appear with a "wet stripe" beneath them and three concentric dashed spray arcs whose stroke-dashoffset animates continuously, so the water reads as flowing droplets. Dashed lateral pipe runs trace from the controller on the garage wall to each live zone. The plan card prices the scenario in mono and states the real watering roster for the chosen source — two days on mains, three on a bore, winter switch-off 1 June – 31 August, Water Corporation 13 13 75 — genuinely correct advice, stated plainly.

Two SVG rules from the collection's learnings shaped the implementation: position and orientation live on outer <g transform> attributes while CSS animates only inner elements (a stylesheet rule silently discards any presentation attribute it touches), and zone visibility toggles by class, never the .hidden IDL property SVG elements don't have. The arc loop is phased for the 7-second thumbnail settle: opacity oscillates between 0.55 and 1.0 and never reaches zero, so the arcs are visibly mid-spray at any capture instant — verified against a real t=7s screenshot. Reduced motion renders the arcs settled, complete and static.

The pricing model (source of truth)

Pinned anchors from the spec are binding; the model's shape is documented here so QA has one source of truth.

• Worked example (measured): the rest state — 4 zones, new system, mains — computes 4 × $480 + $340 = $2,260, matching the spec's cross-derived hypothesis exactly. Verified against an independently reimplemented oracle in the QA harness, at rest and across driven scenarios (2 zones → $1,300, 1 zone → $820).
• Floor consistency: the planner's cheapest output (repair visit, $120) equals the services grid's "from $120 callout" anchor, so the page never argues with itself.
• Deliberately flat dimensions: the controller upgrade is flat whatever the zone count (the wiring check covers every station on the board), and the source toggle changes the roster, not the price — mains vs bore moves running cost, not install cost. Both flats are stated on the card, not hidden.
• Honest edge: choosing "bore pump" auto-switches the source to bore; flipping back to mains keeps the price but the card says a new mains system is usually the better spend on a small block.
• A new system enforces a one-zone minimum — the card explains the block instead of silently ignoring the tap.

Conversion decisions

• Planner as hero. The signature sits beside the h1, not below the fold — the thumbnail and the first five seconds both show the product working, and at 375px the value proposition, primary CTA and trust line still clear the fold before the planner begins.
• Two CTAs, one job each. "Book a repair — from $120" (the highest-intent, lowest-friction entry) and a straight call button. Mobile gets a sticky call/book bar with 48px targets.
• Planner→form handoff. "Use this plan in the booking form" copies job, zones, source and the estimate into the enquiry — the demo interaction becomes a warmer lead. The form stays empty at rest so nothing masks validation.
• Form fields: name, phone, suburb, job select, optional description — the minimum a scheduler needs to route a retic call. Local validation with per-field messages; the confirmation is honest demo copy ("nothing was sent anywhere") in the collection's established lexicon.
• Roster as trust. The real watering rules appear in the plan card, the FAQ and the trust strip — the single most repeated question this trade gets, answered before the phone rings.

Local SEO we'd implement for the real business

This demo page deliberately carries no LocalBusiness/Review structured data — fictional data in a real index is dishonest markup, so the live page emits only WebPage schema naming it a demonstration. For a real client we would ship:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Sandgroper Reticulation",
  "telephone": "+61-8-XXXX-XXXX",
  "url": "https://sandgroperretic.com.au",
  "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",
                 "Piara Waters","Southern River","Gosnells","Leeming"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:00", "closes": "16:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "12:00" }
  ],
  "priceRange": "$$",
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "137" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from the live review feed, never hand-written."
  }]
}
</script>

What would change for the real client

• ServiceM8 — the booking form books straight into job routing with on-the-way SMS; the "we'd call you back" promise becomes a real dispatch rule.
• Hydrawise / Rain Bird controller platforms — the Wi-Fi controller card links to the actual app ecosystem the client installs.
• Water Corporation roster data — the plan card's roster line keyed to the customer's entered suburb and house number.
• Xero + GoCardless — invoicing and annual winter-service plans on direct debit (the $140 tune becomes recurring revenue).
• Podium — the demo reviews replaced by a live, attributed review feed feeding the schema above.

Techniques

• Procedural SVG throughout: the yard plan, service-area map (stylised roads, Canning River hint, dashed response ring) and every icon — no raster assets.
• CSS-only animation: dash-offset flow on arcs, opacity mist and ring pulses, entrance choreography with a crafted cubic-bezier(.2,.7,.2,1) stagger — all gated behind prefers-reduced-motion.
• State probe window.__reticulation exposes job, zones, source, computed total, roster and form status for state-gated QA.
• Vanilla JS under 200 lines; no libraries. The pricing function is the single source the card, probe and handoff all read.

Iteration log

Designed & built by Sapience Analytics — part of the Generative Assets collection. Sandgroper Reticulation is a fictional business; watering rosters and suburbs are real, everything else is demonstration copy.