Generative Assets · Industry Demos XXVI · site 341

Boardwalk Floor Sanding & Polishing — how it was made

A conversion landing page for a fictional Bassendean floor sander, built to show a real Perth trade what their own site could do: price the floor before the van leaves the yard, then book the site measure with the scope already filled in.

Concept

Boardwalk Floor Sanding & Polishing is a fictional business — Perth jarrah, blackbutt and pine floors sanded back to bare timber and finished in water-based polyurethane, two-pack gloss or hardwax oil, working metro-wide from Bassendean. The audience is the owner of a 1950s–70s home who has just lifted the carpet, the renovator who wants the floors done before the kitchen goes in, and the landlord between tenants. The page has one job: a site-measure booking with the area, finish and extras already priced.

The art direction is the workshop at 9am with the dust extractor running: sawdust-cream ground, walnut ink, sanded-jarrah CTAs, machine-grey linework. The whole page is designed to read like a floor half-sanded — one side grey and tired, one side glowing.

Palette — measured, not assumed

Every ratio below is WCAG arithmetic on the shipped hex values, measured in Pass 1. The spec's hypotheses landed within 0.3 of the measured figures; the one under-5 pair (jarrah on the ground) took the pre-minted two-token remedy rather than a palette shift.

Timber colours on the drawn floor — jarrah #8E3B22, blackbutt #C9A16A, baltic pine #E1B778 — are artwork, not text grounds; the on-floor timber tag and the price lid sit on paper panels so their walnut and grey-ink type keeps the ratios above.

Type

Bricolage Grotesque (700, 800 for the display line and the price) carries the headlines, the wordmark, the price lid and the display moment — a grotesque with a workshop's shoulders, wide enough to feel like a trade and sharp enough not to look like a hardware catalogue. Source Sans 3 does everything else at 17px, 16px in form fields, never below 13px. The typographic moment is the area set huge above the drawn floor — "ONE-TWENTY SQUARE METRES, BACK TO BARE" — which swaps with the scope chips and the stepper (twenty, sixty, one-twenty, one-oh-five, two hundred), the number words written the way a sander says them on the phone.

The signature — the Board Reveal

A drawn SVG plank floor in one-point perspective (vanishing point above the far wall), the boards running left to right with seeded butt joints and grain lines in machine-grey linework. The floor is drawn twice from the same seeded geometry: a grey, scuffed layer (scuff strokes, two old water stains, grey grain) and a timber layer held in <defs> and instanced twice with <use> — once clipped to the permanently-sanded strip on the left, once clipped to a polygon whose right edge is the reveal front. A drawn drum sander (housing, motor, drum, rear wheels, handle bar, dust bag, trailing cord) sits on a lane at depth z = 1.34 and sweeps the front from 20% to 80% of the room over ten seconds; behind it the grey boards become the selected timber's colour with the selected finish's sheen band. At the end of the pass the moving layer cross-fades out over 0.9 s while the sander fades back in on the left — the left-hand 20% strip never dims, so the floor reads half-tired, half-glowing at any capture instant (the 7 s settle measured the front at 0.61). Reduced motion renders a single settled frame with the front at 0.55.

Timber chips recolour the timber layer's polygons (CSS transition: fill .35s on the shared defs — the instances follow) and swap the on-floor tag; the price is pinned unchanged and the card says so. Finish chips rewrite the sheen gradient's stops (gloss: a hard bright core plus the window's four panes reflected in the floor; satin: a soft band; oil: a whisper of light with the grain opacity lifted to 0.62) and the sheen tag. Scope chips set the area stepper, and the area rebuilds the geometry — the far wall recedes and the row count grows from 9 rows at 20 m² to 18 at 200 m² — with a first-draw stagger of 42 ms/row (1.1 s cap) and a snappy 9 ms/row (380 ms cap) on every subsequent rebuild. The rebuild is synchronous inside the handler and the sweep loop reads the live scene object, so a rapid-fire chip run can never leave a stale closure over old rows; the row-reveal class is added unconditionally so a rebuild-then-recolour in one frame never leaves the floor blank. The rAF delta is clamped at zero and capped at 50 ms. The price lives on the floor as a paint-tin lid at the near-right, with a tight variant below 600 px (price only, scaled up 1.42×) so it never covers the drawn boards on a phone.

Pricing model — pinned anchors, measured outputs

Toggle matrix

Worked examples — all measured from the running page and cross-checked against an independent oracle

Totals display to the whole dollar; every anchor and quantity is integer-safe by construction. The estimator's cheapest priced output per finish equals the services grid's "from" floor.

Conversion decisions

• Above the fold at 375: a trust eyebrow (Bassendean · est. 2010 · 5-year warranty), the h1 naming the trade and the area, a jarrah "Book a site measure" button and a ghost call button — all inside the first 667 px, with the sticky call/measure bar underneath.
• The signature sits in the hero grid, sticky on desktop beside the controls, so the floor and the price lid stay in view while the customer changes scope, timber, finish and area. On a phone the order is copy → scene → controls → ledger, and the price lid carries the number when the ledger has scrolled away.
• The price is on the artwork — a paint-tin lid at the near-right of the floor — so the 1200×750 thumbnail is the commercial argument, not just the picture.
• Form fields: name, best phone, suburb (the site-measure van needs a suburb before anything else), a timber select with "not sure — it's under carpet" (most callers genuinely don't know), and a textarea pre-filled from the Board Reveal with the scope, area, timber, finish, extras and estimate — the calculator-to-form handoff that turns a demo interaction into a warm lead. The timber select follows the chip until the customer edits it.
• Validation and confirmation: front-end only, visible focus rings, an inline error under each field, and a designed confirmation panel hidden until a valid filled submit — no fake network round-trip; the panel says plainly that nothing was sent.
• Honest lines everywhere: the 25 m² minimum is stated in the meter's own unit on the stepper card, on the ledger and on the price lid; the timber card says the timber changes the colour, not the rate; the stain toggle explains why hardwax oil disables it; new floors, parquetry and stairs print no number on the grid, in the ledger and in the FAQ.

Local SEO we'd implement for the real business

The live page emits only WebPage, WebSite, CreativeWork and a BreadcrumbList naming it a demonstration — fictional structured business data in a real index would be dishonest markup. For the real Boardwalk we would ship this on the home page, fed from the actual reviews source:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Boardwalk Floor Sanding & Polishing",
  "description": "Timber floor sanding, polishing, staining and board repairs across Perth.",
  "url": "https://www.example-boardwalk.com.au/",
  "telephone": "+61 8 9000 0341",
  "priceRange": "$$",
  "address": { "@type": "PostalAddress", "addressLocality": "Bassendean",
               "addressRegion": "WA", "postalCode": "6054", "addressCountry": "AU" },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.9067, "longitude": 115.9439 },
  "areaServed": ["Bassendean","Bayswater","Maylands","Mount Lawley","Guildford","Morley","Midland","Perth"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:00", "closes": "17:00" }
  ],
  "hasOfferCatalog": { "@type": "OfferCatalog", "name": "Floor sanding services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Sand & polish, water-based polyurethane" }, "priceSpecification": { "@type": "UnitPriceSpecification", "price": "42", "priceCurrency": "AUD", "unitText": "m²" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Two-pack polyurethane gloss" }, "priceSpecification": { "@type": "UnitPriceSpecification", "price": "46", "priceCurrency": "AUD", "unitText": "m²" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Hardwax oil finish" }, "priceSpecification": { "@type": "UnitPriceSpecification", "price": "52", "priceCurrency": "AUD", "unitText": "m²" } }
    ] },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "112" },
  "review": [
    { "@type": "Review", "author": { "@type": "Person", "name": "H. (Bayswater)" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Thirty years of carpet up, jarrah underneath, back to the colour of a good red in two days." }
  ]
}
</script>

Alongside it: a Google Business Profile pinned to the Bassendean workshop with the finish photos as the cover set, suburb-specific service pages for the top ten eastern suburbs, the FAQ marked up as FAQPage, and reviews syndicated from Google rather than typed in.

What would change for the real client

• Their floors: the drawn floor stays as the estimator's canvas, but the reviews and services get their before-and-after photography — a jarrah hallway grey then glowing sells harder than any illustration.
• Their reviews feed: the three demo reviews become a live Google reviews widget with the real count and rating, and the schema above goes live.
• Their job system: the site-measure form posts to Tradify or ServiceM8 as a new enquiry with the Board Reveal scope in the notes, so the measure is booked from the phone in the van; the ledger's line items map onto the quote template so the estimate becomes the draft quote.
• Their books: accepted quotes flow to Xero as invoices with the deposit line; the estimator's rates read from one place so a price change is one edit, not four.
• Their numbers: real ABN, real licence and insurance details, real phone with call tracking on the tel: links.

Iteration log