How the Clearrun Liquid Waste demo was made

Concept

Clearrun Liquid Waste pumps septics, services ATUs and empties grease traps across the Perth hills. The audience is hills and semi-rural households who can't remember their last pump-out, new owners of unsewered blocks, and café operators on a grease-trap schedule. The page has one job: a pump-out booking with tank size and access already priced — so the signature is a priced drawing, not a gallery.

The subject gets treated matter-of-factly. No squeamishness, no jokes: the cutaway draws crust, liquid and sludge as honest bands because that's what the truck is there for, and the customer deciding whether to book deserves to see the thing they're deciding about.

Palette — loam, leaf and clay

Argued from a hills block in the morning: limestone loam under everything, eucalyptus linework over it, clay ochre where a decision happens.

#EFEDE4 — limestone loampage ground; the pale sand every hills post-hole hits

#2A2B24 — topsoil inkbody text; measures 12.2:1 on the ground

#A85B2A — clay ochreCTAs and marks; carries buttons (white on ochre measures 5.0:1), never small text

#5C7D5A — eucalyptusyard linework, rules, the water-table hatching

Derived working tokens, per the ink/line split: muted ink #565749 (measures 6.3:1 on loam) for secondary copy, deep eucalyptus #3E5A3D (6.6:1) for links, deep ochre #8A4A20 (5.8:1 on loam, 6.8:1 on card) for hover and every small ochre-toned price or label. The accent stays on lines and marks; text always gets its own ink.

Type

Bitter (600–800) for display — a slab serif with groundworks certainty; it sets the wordmark, headings, the ledger total, and the drawing's one typographic moment: the tank capacity ("3,200 L") set at 46px inside the SVG sky, swapping live as the size chips change. Nunito Sans (400–800) is the workhorse: warm, legible at 16.5px body, and its heavy weights carry chips, steppers and the sticky bar without shouting.

The Tank Gauge

One 720×470 SVG cutaway of a hills block: house, gum tree (with a magpie for the second read), lawn line, and below it the buried septic tank in cross-section — crust, liquid and sludge drawn as honest bands, inlet from the house, outlet to a slotted leach drain, winter water table hatched in eucalyptus at the bottom. The Clearrun vacuum truck parks on the surface with its hose run to the tank riser; the suction flow is an ochre dashed overlay animating along the hose with an opacity pulse floored at 0.55, so the scene is visibly alive at any capture instant.

The static scene (sky, tree, truck, soil) lives in markup; everything stateful renders into one <g id="dyn"> rebuilt from a template-literal builder per state change. Size chips (2,300 / 3,200 / 4,500 L) resize the drawn tank and swap the capacity display; the years stepper raises the drawn sludge band — a wavy settled surface clipped to the tank's rounded cavity — and at ≥5 years shows a hedged note ("past the 3–5 year guidance most systems run on"), never a price change: the gauge shows urgency, the price is the pump-out, stated on-card. The buried-lids stepper draws hand-dig excavation marks and a flag over each buried lid; the second-tank toggle draws a second tank on the block; same-day lights a beacon on the truck cab. The computed price sits in an estimate badge inside the artwork, top-right of the sky, so the 1200×750 thumbnail carries the commercial argument.

Engineering: first draw gets entrance choreography (95ms group stagger, 1150ms cap); every later redraw is snappy (30ms/330ms) via a firstDraw flag. A render token is bumped in the handler before any state lands in the DOM, so rapid-fire clicks can never leave a stale settle timer lying; window.__septic exposes scenario, price, note and a settled flag for state-gated QA. The badge's pop micro-interaction animates CSS transform with transform-box:fill-box on an element that carries no transform attribute — the SVG-attribute-vs-CSS split observed throughout. Reduced motion kills the pulse and stagger and renders the settled frame immediately. No rasters, no canvas, no rAF loops — the whole scene is declarative SVG plus three CSS keyframe animations.

Pricing model — pinned anchors, measured outputs

Item	Anchor	Behaviour
Pump-out, 2,300 L	$330	base — equals the services grid floor "from $330"
Pump-out, 3,200 L	$390	base
Pump-out, 4,500 L	$470	base
Second tank, same visit	+$180	live for every size
Buried lids, hand-dug	+$90 / lid	0–2, live in every state
Same-day / overflowing	+$150	live in every state; emergency strip carries it
Years since pump-out	$0	drawing + ≥5-year note only — price-inert by design
ATU quarterly servicing	$140 / visit	service card only — "the gauge prices pump-outs"
Grease traps	from $260	service card, volume-dependent
Leach drains / replacements	no number	designed price-less state — quoted after inspection

Worked figures, all measured from the running page against an independently reimplemented oracle: rest state 3,200 L + 1 buried lid at 4 years = $480 (no note); 4,500 L + second tank + 2 lids = $830; 2,300 L same-day = $480 — same figure, different story, disambiguated by the itemised ledger; 3,200 L at 6 years = $390 with the note showing. All 36 size × lids × second × same-day combinations verified against the oracle. Totals are whole-dollar by construction (integer steppers × integer rates).

Conversion decisions

Above the fold at 375px: wordmark, same-day tel with its own labelled treatment, the one-line value proposition naming trade and area, primary CTA and the licensed-carrier trust chip — before any art.
Same-day as the emergency line: an overflowing septic is this trade's burst pipe. The header tel carries a "same-day line" label, the hero carries an ochre-bordered overflow strip with the 2pm cut-off, and the mobile sticky bar's call half repeats it.
Gauge → form handoff: "Book this pump-out" pre-fills tank size, last-pumped bracket and access notes (lids, second tank, same-day, the estimate) — the demo interaction becomes a warmer lead.
Form fields: name, phone, suburb only are required; tank size has a "not sure — we'll check" option because most callers genuinely don't know, and the access-notes textarea maps to what the driver actually asks (gates, dogs, steep drive, buried lids).
Confirmation: a designed local panel — hidden until a valid submit — that names the callback window and declares the demo. No fake network round-trip.
Price-less where honesty demands it: leach drains and replacements print no number anywhere; Health Department approval drives the design, so the declaration is the deliverable.

Local SEO we'd implement for the real business

The demo page carries only WebPage/CreativeWork schema, because fictional structured data in a real index is dishonest markup. For a real Clearrun we'd ship LocalBusiness-family markup — schema.org has no septic or liquid-waste subtype, so the honest top-level choice is HomeAndConstructionBusiness with the specifics carried in knowsAbout and the service catalogue:

{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Clearrun Liquid Waste",
  "description": "Septic tank pumping, ATU servicing and grease trap
    cleaning across the Perth hills and semi-rural metro.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": { "@type": "PostalAddress", "addressLocality": "Mundaring",
    "addressRegion": "WA", "addressCountry": "AU" },
  "areaServed": ["Mundaring", "Parkerville", "Stoneville", "Mount Helena",
    "Chidlow", "Sawyers Valley", "Wooroloo", "Gidgegannup", "Glen Forrest",
    "Darlington", "Kalamunda", "Roleystone", "Bullsbrook"],
  "knowsAbout": ["septic tank pumping", "aerated treatment unit servicing",
    "grease trap cleaning", "leach drain replacement"],
  "openingHours": "Mo-Sa 07:00-17:00",
  "priceRange": "$$",
  "hasOfferCatalog": {
    "@type": "OfferCatalog", "name": "Liquid waste services",
    "itemListElement": [
      { "@type": "Offer", "name": "Septic pump-out",
        "priceSpecification": { "@type": "PriceSpecification",
          "minPrice": 330, "priceCurrency": "AUD" } },
      { "@type": "Offer", "name": "ATU quarterly service",
        "priceSpecification": { "@type": "PriceSpecification",
          "price": 140, "priceCurrency": "AUD" } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "87" },
  "review": [{ "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "Real customer name" },
    "reviewBody": "Pulled from the live Google Business Profile feed." }]
}

Plus: a Google Business Profile wired to the reviews feed, suburb-level service pages only if the call data justifies them, and tel: conversion tracking on the same-day line.

What changes for the real client

Their truck, their yard photos — the procedural cutaway stays as the pricing tool, but real jobs earn real photography around it.
Booking system: the form posts into ServiceM8 or AroFlo (both common in liquid waste) with the gauge's scenario as job notes; same-day requests page the on-call driver.
Pump-out reminders: the disposal-receipt record becomes a 3–5 year SMS reminder book — the single highest-value automation in this trade, because nobody remembers their last pump-out.
Live reviews from the Google Business Profile replace the demo copy; the disposal receipt PDF gets emailed automatically from the job record.

Iteration log

Pass 1 — Craft

Screenshot review at 1200×750 caught the outlet drop-pipe cutting straight through the second tank at 4,500 L (drop at x=436 inside the tank's 425–531 span) — clamped the drop to x≤418 when the second tank is drawn, clear at every size.
"Second tank — same visit" label sat 6px off the leach drain line; pushed the drain runs down to y=306/328 and tightened the label.
Removed a stray solid stroke-dasharray="1 0" on the water-table hatching; the rows are already segmented paths.
Verified the ink split: muted ink #565749 measures 6.3:1 on loam, raw ochre never carries small text (deep ochre #8A4A20 does, at 5.8:1+); drove the full 50-assert harness green (worked figures, form both ways, 375 masthead).

Pass 2 — Depth

Sludge surface redrawn as a settled wave (two quadratic segments) instead of a ruled rectangle, clipped to the tank cavity's rounded corners — the band now reads as sediment, not a chart.
Second-read detail: a magpie on the gum branch, drawn in four shapes.
Micro-interaction: the estimate badge pops (scale .94→1) on snappy redraws — CSS transform with transform-box:fill-box on an element with no transform attribute, so presentation attributes and animation never fight.
Dual-speed redraw measured: 95ms group stagger / 1150ms cap on first draw, 30ms / 330ms after; settle flag at 1500ms / 500ms, token-guarded.

Pass 3 — Hardening

Chanel cut: removed the morning sun disc — the badge owns the sky's right side and the gradient carries the hour.
375px masthead measured explicitly: wordmark right edge 103px vs call-button left edge 232px, no collision; scrollWidth 375 on both pages; sticky call bar in the bottom 140px with a ≥44px tel target.
Reduced-motion emulated in headless Chrome: pulse animation off, hose at full opacity, scene settled immediately.
Exhaustive drive: all 36 size × lids × second × same-day combinations asserted against an independently reimplemented oracle, plus two rapid-fire volleys (11 and 21 dispatches in single evaluates, no settles) — end state consistent both times; note boundary checked at exactly 4 and 5 years.
Phone pattern written v-flag-safe (every literal special escaped) and proven by checkValidity round-trip; zero console errors across every run.