How Clearwell Pools was made

The concept

Pool buying starts with two anxieties: "what does it actually cost?" and "will it fit?". The Pool Fit answers both at once — a top-down drawing of a backyard with the shell set in, resized live by three shell chips, with fencing, heating, mineral water and a crane lift toggling on and off as drawn objects with drawn prices. The estimate badge floats on the water itself, so the price and the pool are one picture. Whatever the visitor configures carries straight into the booking form.

Palette — limestone, pebble, filtered water

Argued from the materials of a WA pool build: limestone paving underfoot, the dark pebble of a pool interior, water with the sun filtered through it, and the sand of coping strokes. Contrast figures below are measured from the shipped tokens with WCAG arithmetic, not estimated.

The spec hypothesised ≈5.6:1 for white-on-teal and ≈7:1 for the deep-teal ink; they measured 6.08:1 and 8.04:1, so the pre-minted two-token pair shipped as specced with no remedy needed. Support inks: #41565F soft ink measures 6.73:1 on the ground and 7.39:1 on cards; the barrier-note amber #5C4A18 measures 7.48:1 on its #F6EFDC field; footer copy #C6D4D1 measures 9.05:1 on the pebble ink.

Type

Sora 600/700 for display — its engineered rounds read like moulded fibreglass, and it carries the typographic moment: the shell length set huge ("SIX AND A HALF METRES OF SUMMER") that swaps with the shell chips. Albert Sans is the workhorse: open, legible at 16.5px body, comfortable in chips, ledgers and form labels.

The Pool Fit — how it works

The scene is a single inline SVG: lawn bands, a paver-pattern pad, boundary fence with procedural palings, then the pool — coping band, coping edge and water rect all centred on one point and resized by pure attribute arithmetic. A <canvas> overlay clipped to the water's rounded rect draws the shimmer: five layered sine caustic lines plus a drifting sun glint, with the global alpha riding 0.70 + 0.15·sin(t) so the animation never drops below a 0.55 visibility floor — the 7-second thumbnail always catches it mid-shimmer.

• Dual-speed redraw: the first render earns a 900 ms entrance with fence ticks staggering in at 26 ms each; every subsequent chip or toggle redraws at a snappy 450 ms with an 11 ms stagger, via a firstDraw flag.
• Stale-frame safety: every control handler bumps an invalidation token before touching state; in-flight tweens and staggered tick timers check the token and abandon silently, so rapid-fire clicking can never leave a stale closure driving the scene.
• rAF hygiene: the shimmer's delta is clamped at zero and capped (dt = min(max(now−last,0)/1000, 0.05)), the loop idles when the tab is hidden, DPR is capped at 2, and a ResizeObserver re-sizes the canvas.
• Derived-state pricing: fencing is priced at the shell's pinned perimeter allowance (16 / 19 / 22 lm × $390), so changing the shell with fencing on honestly re-prices the fencing line — 6.5 m → 8.0 m moves it $7,410 → $8,580. Heat, mineral and crane are flat at every shell, and the card says so.
• Honest price-less line: site power and extra earthworks print no number anywhere — "quoted from the site visit — no two backyards dig the same" appears in the ledger beside every total, and abbreviated on the badge itself.
• The barrier note: turning fencing off never blocks the estimate; it swaps in the pinned note — WA law requires a compliant barrier before the pool holds water, yours or ours.
• State probe: window.__poolbuilder exposes shell, toggles, computed lines, total and a settled flag, so QA gates on state, never on seconds.

Pinned anchors

Rest state measured from the running page: 6.5 m + fencing (19 lm) = $60,310. All worked figures — $48,740, $78,280, $55,300, $72,380 — were verified against an independently reimplemented oracle in the QA harness.

Conversion decisions

• Above the fold: trade + area + promise in the h1, the call button beside the booking CTA, and the estimator card sharing the hero — the $60,310 badge lands inside the 1200×750 thumbnail.
• Estimator → form handoff: the configured shell, options and estimate pre-fill the booking textarea; the crane toggle also pre-selects "tight access" in the block-access field (only while the visitor hasn't touched it).
• Form fields: name, phone, suburb, block access, and the pre-filled configuration — the minimum a pool builder needs to price a site visit. Empty submits mark fields inline; a valid submit swaps the form for a designed confirmation panel ("we'd call you back within one business day") that is plainly labelled a demonstration.
• Mobile: a fixed call/book bar below 860px, 44px+ tap targets, and the masthead checked at 375 first.

Local SEO we'd implement for the real business

The live page carries only WebPage/CreativeWork/BreadcrumbList schema naming it a demonstration — fictional business data doesn't belong in a real search index. For a real Clearwell, we'd ship this (with their real reviews feed):

{
  "@context": "https://schema.org",
  "@type": "GeneralContractor",
  "name": "Clearwell Pools",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Baldivis",
    "addressRegion": "WA",
    "postalCode": "6171",
    "addressCountry": "AU"
  },
  "areaServed": ["Baldivis", "Wellard", "Secret Harbour",
                 "Rockingham", "Kwinana", "Mandurah", "Perth"],
  "priceRange": "$42,500+",
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:00", "closes": "17:00"
  }],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "87"
  },
  "review": [{
    "@type": "Review",
    "author": {"@type": "Person", "name": "…"},
    "reviewRating": {"@type": "Rating", "ratingValue": "5"},
    "reviewBody": "…"
  }]
}

Why GeneralContractor: schema.org has no pool-builder subtype, and WA pool installation legally runs under a registered building contractor — so GeneralContractor is the honest, most-specific organization type available. For the real client we'd also wire the booking form into their job software — Buildertrend or Tradify for scheduling and site-visit workflow, Xero for deposits and progress invoicing — and swap the demo reviews for their live Google reviews feed.

Iteration log