Build guide · Site 284 · Industry Demos XIV

How Bareblock Demolition was built

Bareblock Demolition is a fictional Welshpool demolition contractor — a conversion-focused landing-page demonstration for the trade. The audience is knock-down-rebuild families, developers, and fibro-era owners who already suspect what is in the walls; the page’s single job is to book a site assessment. The whole page argues one idea: demolition is paperwork, utilities and safety sequencing with twenty minutes of drama at the end — so the design is cold, procedural and exact.

Palette — a Welshpool arterial block at 5:45am

The wave’s single dark site, argued apart from every prior dark — and explicitly from earthmoving’s warm iron-oxide dusk. That was rust and end-of-day heat; this is blue-grey 5am cold before the exclusion zone goes up. No sodium warmth anywhere.

#20242A pre-dawn ironground — overcast 5am, the cold before the first machine starts

#E4E7E4 first lightbody-ink on dark — the grey sky coming up behind the roofline; 12.3:1 on iron

#D64533 danger redLINE / MARK only — the tape between the pickets, sequence rules, teardown strokes; never body text (3.5:1)

#C23A29 red fillderived darker red for CTA fills so white button labels hold 5.3:1

#C9B892 dust buffsecondary — the dry sand that hangs after a wall drops: links, focus, active chips; 8.0:1 on iron

#262B33 panelcard surfaces — one step of first light into the iron

The ink/line split is enforced: danger red draws the exclusion tape, the stage dots and the section rules, but every sentence is set in first light or the dimmed #A9B2BA (5.6:1 on panel).

Type

Saira Condensed 700 — display. Plant-decal caps for the masthead moment: the compressed, stencilled confidence of machine livery. Punctuation is kept off line ends in the tight-leading caps blocks (LEARNINGS W19), which is why the masthead breaks “Bareblock / Demolition” with no punctuation at all.
Saira — body and UI. Same family DNA as the display, so the page reads as one voice at two volumes.
Spline Sans Mono — the measurements: m², stage names, totals, the ticket-like price lines. Everything a site diary would record is set in mono.

The signature — the Teardown Planner

A procedural SVG elevation that deconstructs live, wired directly to the quote. Structure chips (brick & tile / fibro-era / steel shed / backyard pool), an 80–300 m² area stepper for houses, and three scope toggles drive both the price card and the scene. The teardown runs as a staged sequence — disconnect · strip · roof · walls · slab · cart-off · level — with the stage rail relabelling honestly per structure: fibro gets “strip & seal” (sheets come off by hand into sealed bags before any machine starts), the shed gets “sheets · frame”, the pool runs drain · punch · backfill · compact · certify.

Implementation. Each structure has a builder that assembles the scene from primitives (wall courses, roof bands as sloped trapezoids, stud frames, backfill lifts) plus shared dressing — star-picket exclusion fencing with two sagging danger-tape runs, the excavator with a two-link posed arm, the water cart with drifting mist, the protected tree with its “KEEP” tag. A stage-weight table maps a single progress value p ∈ [0,1] to per-stage local fractions; the update function fades courses top-down, lifts roof bands ridge-first, grows and then carts off the rubble polygon, and poses the excavator arm against the current top of the structure. The rest state holds the house at p = 0.56 — roof gone, walls half dropped, excavator mid-reach — so the 7-second thumbnail always captures the teardown mid-demonstration, and nothing in the loop ever drops below the 0.4 visibility floor. Reduced motion renders the completed bare block with the sequence list settled.

Dual-speed redraw (LEARNINGS W21): the first render staggers wrappers at 45 ms/element capped at 1.1 s; every subsequent structure change redraws at 16 ms capped at 420 ms, and area/toggle taps rebuild instantly at the held progress. The state probe window.__demolition carries structure, effective toggles, the locked-asbestos flag, total, progress, stage and a settled flag that only fires after the entrance delays and the 0.42 s wrapper transitions have fully drained — a lesson paid for in Pass 3 (below).

The pricing model — measured, not asserted

Every figure was verified against an independently reimplemented oracle in the QA harness (LEARNINGS W14), driven through the real controls headlessly. All worked examples measured exactly as the spec’s anchor arithmetic — zero corrections.

Pinned anchors and measured outputs
Scenario	Arithmetic	Spec	Measured
Rest state — brick & tile, 160 m², slab out, green waste	160×$110 + 160×$18 + $1,400	$21,880	$21,880 ✓
Rest + asbestos toggled on	+ 160×$30	$26,680	$26,680 ✓
Fibro-era, 120 m², slab + green, asbestos locked on	120×($85+$30) + 120×$18 + $1,400	$17,360	$17,360 ✓ (toggle locked)
House floor — 80 m² brick, all toggles off	80×$110	$8,800	$8,800 ✓ = grid from-price
Fibro floor — 80 m², forced asbestos	80×($85+$30)	$9,200	$9,200 ✓ = grid from-price
Steel shed flat (to 60 m²)	flat	$2,800	$2,800 ✓ = overall grid floor
Pool fill-in flat	flat, incl. compaction certificate	$9,500	$9,500 ✓

Derived decisions, declared on-card

Per-m² toggles disable with the flat structures. The asbestos and slab-out meters are priced per square metre of floor area; with shed or pool selected the area meter itself is disabled (“the price is the job, not the metres”), so the per-m² toggles disable too, each with its own on-card reason (LEARNINGS W18 — no control ever computes a dishonest figure or silently no-ops). The pool’s slab-out reason is the spec’s: the fill-in already deals with the shell.
Green waste stays live for every structure. It is a flat $1,400 line about the block’s planting, not the building — so it prices honestly regardless of structure, and the scene responds (shrubs appear and are cleared).
The fibro lock. Selecting fibro-era forces the asbestos toggle on, locked, with the regulatory reason on-card; the user’s brick-mode preference is remembered and restored. The probe exposes asbestosLocked so QA can assert the lock, and the harness verifies a click on the locked switch changes nothing.
Floor consistency (LEARNINGS W12/W19): the planner’s cheapest house output equals the services grid’s $8,800 from-price, and its cheapest overall output equals the shed’s $2,800 — both asserted in the harness.

Conversion decisions

Above the fold at 375px: name, one-line value proposition, red CTA, and the trust line — the hero copy reorders on mobile so the CTA and trust signal come before the longer lede.
The planner shares the hero at desktop widths so the 1200×750 thumbnail captures copy and the mid-teardown scene (LEARNINGS W19) — asserted in the hardening pass.
Click-to-call everywhere: header tel link, quote-section tel link, and a mobile sticky bar (call + book, 46px targets).
Form fields match how a demolisher actually qualifies a lead: name, phone, suburb of the site, who is asking (owner-occupier / developer / builder on behalf), target clear-site date (min today — the honest copy notes permits need 3–6 weeks), and free-text site notes. The planner pre-fills a plan summary into the notes on “Send this plan”, and the live plan strip mirrors every planner change.
Local confirmation only: submit validates client-side (inline errors, aria-invalid, focus to first fault) and renders a designed “request received — we’d call you back within one business day” state. No fake network round-trip.
Compliance as credibility: the Building Act 2011 permit, Western Power/ATCO abolishments, WorkSafe asbestos licensing, council pest baiting and the neighbour letterbox note are all quoted plainly — being right about the rules is the demo’s sales pitch.

Local SEO we’d implement for the real business

This demonstration deliberately ships only WebPage schema naming it a demo — fictional structured data in a real index is dishonest markup. For a real client we would ship the tightest schema.org type with genuine reviews:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Bareblock Demolition",
  "description": "House demolition and site clearance across Perth.
    Permits lodged, utilities abolished, licensed asbestos removal.",
  "telephone": "+61 8 9000 0284",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Welshpool",
    "addressRegion": "WA",
    "addressCountry": "AU"
  },
  "areaServed": ["Welshpool","Victoria Park","Cannington",
    "Belmont","Kewdale","Queens Park","Maddington"],
  "openingHours": "Mo-Fr 06:30-16:30",
  "priceRange": "$$",
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Demolition services",
    "itemListElement": [
      {"@type": "Offer", "name": "House demolition",
       "priceSpecification": {"@type": "PriceSpecification",
         "price": "8800", "priceCurrency": "AUD",
         "description": "from — 80 m² brick and tile"}}
    ]
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Review",
  "itemReviewed": {"@type": "HomeAndConstructionBusiness",
    "name": "Bareblock Demolition"},
  "reviewRating": {"@type": "Rating", "ratingValue": "5"},
  "author": {"@type": "Person", "name": "A real client"},
  "reviewBody": "Sourced from the client's genuine Google reviews feed —
    never invented."
}
</script>

What would change for the real client

Permit & abolishment tracking — a live status workflow (lodged → approved → Western Power abolished → ATCO abolished) surfaced to the client and the builder, replacing the static sequence band.
Assignar for plant and crew scheduling; the planner’s scenarios could feed straight into job templates.
SignOnSite inductions tied to the exclusion-zone dates the neighbour note quotes.
Waste-docket & tip-weight reconciliation — the “we sort hard” claim backed by real tonnage splits per site.
Geotab on the floats for machine movement and site-arrival ETAs.
Xero with per-site job codes so permit and abolishment fees genuinely pass through at cost, itemised.
Builder handover packs — clearance certificates, compaction certificates and the permit trail bundled per block, the thing both reviews brag about.
Their photos, their reviews feed, their real licence numbers — and the planner’s rates tuned to their actual book.

Iteration log

Pass 1 — Craft

Drove every control headlessly and reviewed a real 1200×750 screenshot. Found: the scene carried ~40% dead sky (cropped the viewBox from 720×360 to 720×218); the rest progress of 0.62 left the walls reading “nearly gone” rather than the spec’s “half dropped” (retuned to 0.56 — roof gone, 4 of 8 courses standing); the abolished-meter tag floated in mid-air at the bare-block state (now fades with its wall courses); the rubble profile read as a heartbeat spike (reprofiled to a pile); the two-tone masthead split “DEMOLI/TION” mid-word (second line now whole, in buff); the stage rail wrapped untidily (tightened to one line). Harness: 44 asserts green, oracle totals exact.

Pass 2 — Depth

Reviewed all four structure rest states at 2× DPR. Enriched: fibro’s frame now comes down stud by stud instead of a uniform fade; the sealed asbestos bags shifted clear of the fence placard; the letterbox (with its note — the neighbour-review second-read) moved out of the work zone to the verge; the pool’s backfill lifts now taper with the shell profile instead of overhanging it; window and door openings became line-work instead of solid black slabs, and their removal thresholds now tie to the courses that carry them — no more floating openings. Added the price-total pulse micro-interaction on every recalculation.

Pass 3 — Hardening

Masthead first at 375 (LEARNINGS W18): wordmark vs phone-link edges compared explicitly — clean, and the phone keeps its number visible. Found a real probe-honesty bug: the settled flag fired while the 0.42s wrapper transitions (queued behind entrance delays) were still draining, so a “settled” screenshot caught ghost windows mid-fade — the busy window now covers entrance delay + transition tail, and the screenshot review confirmed the fix. Mobile hero reorders CTA + trust above the lede so the fold carries all three conversion elements; sticky-bar labels forced nowrap. Verified: fresh-load empty submit (5 inline errors, aria-invalid), filled submit confirmation, locked-toggle click rejection, keyboard toggle drive, reduced-motion bare-block render, zero console errors, 375 scrollWidth on both pages, and the signature’s bounding box inside the 1200×750 thumbnail viewport.

Techniques

Procedural SVG only — no raster, no libraries. The scene, the service-area map and the favicon are all built from primitives in the palette.
CSS/JS split per LEARNINGS W16/W17: every CSS-animated ornament (tape flutter, mist drift, grab sway) lives on a nested inner group; positions stay on outer transform attributes, so presentation attributes and animations never fight.
Choreography: one entrance (staggered wrapper rise + the teardown easing to its rest hold), then restraint — hover states, the price pulse, and the run-the-sequence button are the only other motion. Reduced motion collapses everything to the settled bare block.
State-gated QA (LEARNINGS W8/W23): the harness never waits on wall-clock guesses — it polls __demolition.settled, drives controls by aria-label, and asserts displayed totals against the independent oracle.