Generative Assets · Wave 30 · Industry Demos XIX

Making Clearpane — a window cleaning page that prices the visit before the phone rings

Clearpane Window Cleaning is a fictional Como operator serving homeowners before a sale or a party, and shopfront owners who want a standing fortnightly round. The page has one job: an enquiry with the pane count already on the meter — the Pane Board turns "how much roughly?" into a number, then hands that number to the form.

The concept

The whole page argues from light through clean glass: pale-sky ground, glass-tint panels, deep glass-blue chrome, and a signature that literally wipes panes clean. Residential and shopfront are genuinely different businesses — different rates, different minimums, different rhythms — so the Board carries two modes rather than pretending one meter fits both. The fortnightly toggle reprices honestly: a standing round is cheaper because the glass never gets bad.

Palette

The ink/line split holds throughout: the accent blues draw lines, fills and buttons; small text always sits in frame slate or the derived muted ink #435562 (7.0:1 on sky).

Type

Jost 600–700 for display — clean geometric with a signwriter-modern feel, right for a trade that letters its own van. Nunito Sans for body — rounded, legible, friendly at 16.5px. The display moment is the per-visit price set huge inside a drawn pane, with "a visit" beneath it — the number is the headline, exactly as it should be on a quote tool.

The Pane Board

An SVG facade built entirely in code. Residential mode draws a two-storey elevation — roof, wall, door, and a window grid per floor; shopfront mode swaps to a street run — fascia, scalloped awning, glass door and a panel row. A layout function packs any count (0–30 ground, 0–20 upper, 1–40 panels) into centred rows, so the elevation always reads as a plausible building rather than an abstract grid.

The squeegee is the motion signature. One rAF clock (delta clamped at zero and capped, per the collection's W29 lesson) drives a deterministic wipe cycle: the blade wipes each pane top-to-bottom, hops to the next with a smoothstep arc, and every pane's smudge opacity is a pure function of time-since-its-wipe within the cycle — no per-pane mutable state, so the scene can be rebuilt at any instant without desync. Freshly wiped panes carry a diagonal glint that fades as the smudge creeps back; a droplet runs off the pane wiped just before the current one. Panes are wiped upper floor first, so the 7-second thumbnail settle always catches the blade mid-wipe on an upper pane — the rest state is designed, not lucky.

Every control bumps an invalidation token in its handler before touching state (the W25 stale-closure rule), and rebuilds redraw with a two-speed stagger: the first draw earns the full entrance (26 ms per pane), subsequent state changes snap in at 11 ms per pane capped ~520 ms. A state probe at window.__windowcleaning exposes the scenario, computed figures, wipe position and a settled flag for QA.

Honest pricing — anchors, minimums, worked examples

Both modes carry their own minimum, stated in the meter's unit and billed at the selected rate. The estimator's cheapest billed outputs equal the services grid's floors ("residential visits from $180", "shopfront rounds min $90"). Hard-water stain treatment is a designed price-less state — mineral etching varies too much to price blind — and solar cleaning is deliberately outside the meter, stated on-card. All figures below are measured from the running page and cross-checked against an independently reimplemented oracle.

Conversion decisions

• Board in the hero. The estimator shares the first viewport with the value proposition — "price a visit" is the page's promise, so the meter can't live below the fold. The $294 display pane sits inside the first 750px at 1200 wide.
• Price above controls. The ledger renders directly under the facade, steppers after — a visitor sees the number first and adjusts second, which is how people actually use quote tools.
• Board → form handoff. Mode, counts and the screens toggle pre-fill the enquiry's job-details field, so the lead arrives warm ("12 ground + 6 upper windows · screens & tracks"). The screens checkbox disables with an on-page reason in shopfront mode rather than silently no-oping.
• Two phone paths. Header tel: link (a chip at 375px) plus the mobile sticky call/quote bar — trade traffic is a phone in one hand.
• Minimum notes are copy, not fine print. When a scenario bills at the minimum, the board says so in a sentence and the FAQ explains why the minimum exists — the same honesty the colophon owes the visitor.
• Local confirmation only. The form validates client-side and shows a designed callback promise; it never fakes a network round-trip, and the panel itself declares the demo.

Local SEO we'd implement for the real business

The live demo page carries only honest WebPage/CreativeWork schema naming it a demonstration. For a real Clearpane we'd ship the block below — schema.org has no window-cleaning subtype, so ProfessionalService is the correct organization type, with the service itemised. Reviews would come from the client's real Google Business Profile, never hand-written.

{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Clearpane Window Cleaning",
  "description": "Residential and shopfront window cleaning across the
    Perth metro — pure-water pole system, screens and tracks,
    standing fortnightly shopfront rounds.",
  "url": "https://clearpane.example.com.au",
  "telephone": "+61-8-9000-0308",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Como",
    "addressRegion": "WA",
    "postalCode": "6152",
    "addressCountry": "AU"
  },
  "areaServed": ["Como", "South Perth", "Applecross", "Victoria Park",
    "Subiaco", "Cottesloe", "Fremantle", "Scarborough", "Joondalup",
    "Canning Vale", "Rockingham"],
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
    "opens": "07:00", "closes": "17:00"
  },
  "priceRange": "$90–$600",
  "makesOffer": [
    { "@type": "Offer", "itemOffered": { "@type": "Service",
      "name": "Residential window cleaning" }, "priceSpecification": {
      "@type": "PriceSpecification", "minPrice": 180, "priceCurrency": "AUD" } },
    { "@type": "Offer", "itemOffered": { "@type": "Service",
      "name": "Fortnightly shopfront round" }, "priceSpecification": {
      "@type": "PriceSpecification", "minPrice": 90, "priceCurrency": "AUD" } }
  ],
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "187" }
}

What changes for the real client

This demo swaps cleanly onto a real operator's stack. Job cards, recurring fortnightly rounds and invoicing would come from ServiceM8, Jobber or AroFlo — the enquiry form posts straight into the job queue with the Pane Board's scenario attached, and the fortnightly round becomes a genuine recurring booking with SMS "on our way" texts. Reviews feed live from Google Business Profile; invoices reconcile through Xero. Their photos replace nothing — the procedural facade stays, because it's the quote tool, not a stock-photo placeholder.

Iteration log

← Back to the Clearpane site  ·  Generative Assets index