Build notes · Industry demo
A fictional Beckenham bricklayer built as a single conversion-focused landing page for homeowners planning a garden, feature or boundary wall. The page has one job — a wall-quote enquiry with the per-metre arithmetic already done in front of the visitor, so the phone call starts from an honest number instead of a guess.
Deliberately near the warm-light family but derived from the trade, not the AI-default cream: the page ground is mortar, the accent is fired clay, the annotation ink is the brickie's string line.
Zilla Slab carries the display — slab serifs read as mortar joints, and at 600–700 the bond names (STRETCHER · FLEMISH · HEADER) set as letter-spaced caps along the wall are the page's typographic moment. Instrument Sans does the body work: legible at 16.5px, quiet next to the slab, tabular numerals for every price.
The board is a pure-SVG wall generator driven by three bond chips, a wall-type toggle and two dimension steppers (length 1.0–12.0 m in 0.5 steps, height 0.6–1.8 m in 0.3 steps). Bricks are laid at real geometry: 230×76 mm faces on 10 mm joints, an 86 mm course gauge, 240 mm stretcher and 120 mm header modules, Flemish alternating on a 360 mm pattern with alternate courses offset half a pattern — so cut bricks appear at wall ends exactly where a brickie would cut them. Each state emits the wall as ordered rects (course-major, bottom-up), and a token-guarded rAF loop reveals them brick by brick.
The rest state is deliberately mid-job: courses laid to two-thirds height, the top course part-done, a string line with pegs at the active course, a course counter ("course 10 of 14"), and a gentle clay-pulse on the brick being laid — opacity floored at 0.55 so the signature is visibly alive at any capture instant. Unlaid courses render as dashed guides inside the full wall's dashed outline, so the priced extent is always readable. The estimate card computes live: area, brick count (area × 50, the single-skin standard-brick figure, stated on-card), and the supplied-&-laid price.
Engineering guards: every control handler bumps the lay-animation token before the state swap (the W25 stale-closure race, designed out from the first draw); redraws are dual-speed (1.6 s entrance once, ~460 ms on every subsequent change); the SVG's aspect-ratio is set per state so a 12 m boundary wall and a 1 m pier both fill the panel; viewBox padding is computed from the annotation font size so dimension labels can't clip. Reduced motion renders the settled mid-lay frame with no pulse. The state probe window.__bricklayer exposes the live scenario, computed figures, a settled flag, and the pure pricing meter for QA.
Second-read details: roughly one brick in sixty-one fires as a dark "clinker" (deterministic hash, so the same wall always shows the same overburnt bricks), and the string line's course counter climbs as the wall re-lays.
All anchors are WA-market-shaped and printed on the page with their minimums. Bond premiums are a labour premium (more cuts and headers) — the brick count stays 50/m², and the card says so.
| Service | Anchor | Minimum / rule |
|---|---|---|
| Garden & feature walls (single skin, supplied & laid) | $195/m² stretcher · $210 Flemish · $220 header | 4 m² billed, at the selected bond rate |
| Boundary walls, 1.8 m with piers | $470/lm all-in | 4 lm billed (floor $1,880) |
| Extension brickwork (labour only) | $1.90/brick laid | bricks supplied by the builder |
| Repairs & repointing | from $480 | half-day minimum |
| Letterboxes & pier caps | from $480 | shares the half-day minimum |
| Engineered retaining brickwork | no number | quoted on the engineer's drawings — a designed price-less state |
| Scenario | Arithmetic | Displays |
|---|---|---|
| Rest state — stretcher, 6.0 × 1.2 m | 7.2 m² × $195 · 7.2 × 50 bricks | $1,404 · 360 bricks |
| Same wall, Flemish / header | 7.2 × $210 · 7.2 × $220 | $1,512 · $1,584 |
| Rounding case — stretcher, 4.5 × 1.5 m | 6.75 m² × $195 = $1,316.25 | $1,316 (whole-dollar, half-up) |
| Clamp binds — 2.0 × 1.5 m (3 m²) | billed 4 m² × $195 / × $220 header | $780 / $880, note shown |
| Exactly 4 m² | raw equals clamp | no note (see below) |
| Boundary 12 lm / 3 lm / 4 lm | 12 × $470 · billed 4 × $470 · 4 × $470 | $5,640 · $1,880 (note) · $1,880 (no note) |
| Extension example (guide-only) | ≈14,000 bricks × $1.90 | ≈ $26,600 labour for a typical 4×2 |
Rounding: totals display to the whole dollar, half-up — the m² meter is the only cents-producer on the page ($1,316.25 → $1,316). Brick counts round half-up too (6.75 m² → 338) and always carry their "at 50 per m²" basis.
Clamp semantics: the minimum is stated in the meter's own unit and billed at the selected bond rate — a 3 m² wall in header bond bills 4 × $220 = $880, not the stretcher floor. The note appears only while the clamp binds; at or above the boundary it disappears. The estimator's cheapest feature output (4 m² × $195 = $780) equals the services grid's "from $780", and the boundary floor equals "from $1,880".
__bricklayer.quote('feature','stretcher',5,0.8) → $780, no clamp) and at the nearest UI-reachable points either side (3.9 m² shows the note, 4.05 m² doesn't). The 4 lm boundary case is stepper-reachable and drives clean through the UI.Boundary mode honesty: the $470/lm rate is all-in, so bond chips and the height stepper are disabled with an on-page reason (bond premiums apply to feature walls; height is fixed at the 1.8 m spec), and no brick count is printed — the pinned model is per-lineal-metre, and inventing a double-skin-plus-piers count would be a guess dressed as data.
The live demo page carries only WebPage/CreativeWork schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real bricklayer, we'd ship the block below. schema.org has no bricklayer subtype, so the honest top-level type is the construction-family parent HomeAndConstructionBusiness.
{
"@context": "https://schema.org",
"@type": "HomeAndConstructionBusiness",
"name": "Bondline Bricklaying",
"description": "Feature walls, boundary walls and extension brickwork across Perth.",
"telephone": "+61-8-XXXX-XXXX",
"url": "https://bondlinebricklaying.com.au",
"address": {
"@type": "PostalAddress",
"addressLocality": "Beckenham",
"addressRegion": "WA",
"postalCode": "6107",
"addressCountry": "AU"
},
"areaServed": "Perth metropolitan area",
"openingHours": "Mo-Fr 06:30-15:30",
"priceRange": "$$",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "87"
},
"review": {
"@type": "Review",
"author": { "@type": "Person", "name": "Real customer" },
"reviewBody": "Pulled from the live Google Business Profile feed.",
"reviewRating": { "@type": "Rating", "ratingValue": "5" }
}
}
Ratings and reviews would come from the client's real Google Business Profile, never hand-written. We'd pair it with suburb-intent pages for the top service corridors, GBP posts per completed wall, and photo-rich job records.
Their wall photos replace the procedural art (though the Bond Board stays — it's the differentiator), reviews come from their Google feed, the enquiry form posts into their job system (Tradify, ServiceM8 or AroFlo all fit a one-crew brickie), and the licence, ABN and phone become real. The pricing meter's anchors become theirs — the honesty rules don't change.
The 58-assert headless harness (independent pricing oracle, every chip/stepper/mode driven, empty and filled submits, 375 masthead probe) went green first run — and the screenshot review still caught four real defects the asserts sailed past: the wall floated small in a mostly-empty fixed-height panel (a 4:1 wall forced into a 1.5:1 box — the SVG now sets its own aspect-ratio per state); the bottom "6.0 m" dimension label was clipped by the viewBox and the height label truncated to "1.2 r" (padding is now computed from the annotation font size); a double-wide gap in the wordmark (nbsp swapped for a margin); and the map's "20 min" caption sat on the radius ring colliding with the Perth and Victoria Park labels (moved outside the ring, Morley's label moved off its neighbours). The rendered image is ground truth.
Drove every state to the binding figures ($1,404 rest · $1,512 Flemish · $1,584 header · $1,316 from 6.75 m² · $780/$880 clamps · $790 at 4.05 m² · $5,640/$1,880 boundary) and screenshotted each. Found the boundary-mode height stepper still displaying the remembered feature height (1.5 m) against the locked 1.8 m spec — the display now locks with the mode. The bond label overflowed narrow walls because its width model ignored letter-spacing (now included — "STRETCHER BOND" stays inside a 1.0 m pier). Anchor scrolls tucked the board under the sticky masthead — scroll-margin added. Piers darkened to read as piers at panel scale; added the estimate-total clay tick on change; second-read details confirmed (1-in-61 clinker bricks, climbing course counter).
375 masthead first: wordmark truncates to "Bondline" below 400px, wordmark/tel/CTA measured with no collision, h1 + CTA + trust chip inside the first viewport, sticky bar fixed with ≥44px tel target. The mode buttons wrapped mid-unit ("per / m²") at 375 — the unit strings now hide below 480px; the wall panel's dead sky trimmed on mobile (min-height 140px). Removed the unused course-rule ornament CSS (Chanel rule). Reduced-motion path renders the settled mid-lay frame, hero at opacity 1, no pulse. Rapid-fire drive (eight dispatched clicks in one evaluate, twice over) stayed consistent with the oracle — the handler-first token invalidation held. This guide got the same 375 probe as the site and failed it first try — an unbreakable inline quote() string pushed scrollWidth to 421px (fixed with wrap-anywhere; the pricing tables were already scroll-wrapped at build time). Zero console errors across all runs; form pattern verified v-flag-valid; final copy read done.
Verified with headless Chrome: 58 assertions including an independently reimplemented pricing oracle over nine scenarios, exact-boundary clamp cases in both meters, confirmation-panel visibility transitions on a fresh reload, JSON-LD allowlist, reserved-phone sweep, and two-frame liveness at the 7-second settle.