Build notes · Industry demo · Site 293

How Fibreline Asbestos Removal was built

Fibreline Asbestos Removal is a fictional Welshpool testing-and-removal outfit built as a conversion demonstration: one landing page whose single job is to turn "is that fence asbestos?" anxiety into a testing or removal enquiry. The audience is the owner of a pre-1990 Perth home — and the page's secondary, non-negotiable job is telling them honestly what not to touch.

Palette — argued from the containment

The controlled work area supplied every colour: taped poly sheeting, respirator rubber, the warning placard, and the calm teal of the all-clear. Placard red is rationed hard — hazard marks and era pins only, never text, never a fill — so when a red pin lands on the diagram it actually means something.

Support inks derived per the ink/line split: #555C64 muted body ink (≥5.5:1 on both grounds), #DCDFE4/#C9CDD4 line tokens, #E8F1F1 clearance tint for calm panels.

Type

Barlow Condensed (600–800) carries the display voice — tall, tight safety-placard capitals, exactly the letterforms stencilled on a warning sign. The typographic moment is the era verdict, set placard-style in condensed caps on charcoal: "BUILT 1968 — ASSUME IT'S IN THE EAVES". Barlow handles body copy: same skeleton, workhorse widths, ≥16px on mobile.

The signature — the Fibro Finder

A build-era picker (1955 / 1968 / 1978 / 1985 / 1995) lights an SVG house-and-yard elevation at the zones where asbestos-containing material is likely for that era: super-six roof, eaves linings, wet-area walls, vinyl floor backing, and the boundary fence. Zones carry two states — likely (filled placard-red pin, pulsing between opacity 1 and 0.55, so the thumbnail can never catch it invisible) and possible (outlined pin, no pulse). Post-1990 resolves to a designed low-likelihood state: a teal all-clear mark and the verdict recoloured from placard to clearance — an answer, not an absence.

Implementation notes: zone geometry is positioned with SVG transform attributes on outer groups while all animation (scale-in, pulse) runs on nested inner elements with transform-box:fill-box — CSS animation and SVG presentation attributes never touch the same element. Era swaps bump a draw token inside the click handler, before the state swap, so any in-flight stagger callbacks self-cancel; the first render earns entrance choreography (250ms base + 150ms/zone) and every later swap redraws snappy (60ms + 45ms/zone) via a firstDraw flag. A window.__asbestos probe exposes era, zone counts, computed figures and a settled flag for state-gated QA.

Beneath the diagram, the removal estimator: three material chips (fence per lineal metre, eaves and wet-area sheeting per m²) with a stepper driving an itemised estimate. Second-read detail: select the fence chip and the yard fence's dimension line quietly follows the stepper — 22 lm on the page, 22 lm on the drawing.

Honest numbers — anchors, clamps, and the price-less line

The clamp semantics are stated in the meter's own unit (a length/area minimum, billed at the selected rate), the clamp note appears only when it binds — at exactly 15 lm or 20 m² the raw arithmetic equals the floor and the note stays hidden — and the services grid floors ($720 fence, $840 sheet) equal the estimator's cheapest possible outputs, so the page never argues with itself. Every figure above was measured from the running page and cross-checked against an independently reimplemented oracle in the QA harness.

Era-to-zone mapping is deliberately honest for WA housing: AC building products left the Australian market in 1987, so 1985 renders everything as "possible — test before any works" and 1995 renders the designed low-likelihood verdict. The safety copy (never cut, drill, sand or waterblast; the WA 10 m² homeowner allowance; "sealed and undisturbed is low risk") is real guidance kept real — only the business is fictional.

Conversion decisions

• Signature in the hero grid — the Fibro Finder shares the first 750px with the value proposition at 1200 wide, so the thumbnail shows the argument, not just copy.
• Estimator→form handoff — "Use this in my enquiry" writes the configured scenario into the message field, turning a demo interaction into a warmer lead.
• The safety band converts by not selling — "never cut, drill, sand or waterblast" plus "we'll tell you over the phone whether it's worth a $60 test" builds the trust the trade actually runs on.
• $60 testing is the low-commitment first CTA — most visitors don't need a removal quote yet; they need certainty. Testing is priced like an easy yes.
• Sticky mobile bar — call + book, thumb-height, on every scroll position at 375px.

Local SEO we'd implement for the real business

This demo page ships only WebPage/CreativeWork schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real Fibreline we'd ship the full local-business graph (as HomeAndConstructionBusiness, the precise schema.org fit for a licensed removalist) wired to their real NAP, licence number and review feed:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Fibreline Asbestos Removal",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Welshpool",
    "addressRegion": "WA",
    "postalCode": "6106",
    "addressCountry": "AU"
  },
  "areaServed": "Perth metropolitan area",
  "hasCredential": "WA Class B asbestos removal licence",
  "openingHours": "Mo-Fr 06:30-16:00",
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "137"
  },
  "review": {
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from the live Google Business Profile feed."
  }
}
</script>

Plus: Google Business Profile with service-area categories, suburb-level landing variants for the high-volume searches ("asbestos fence removal [suburb]"), and review schema fed from the real GBP stream — never hand-written.

What would change for the real client

• Their photos of real containments and clearances alongside (not instead of) the procedural diagram — the Fibro Finder stays, wired to their actual pricing.
• Job management integration — quote requests straight into ServiceM8, AroFlo or Simpro with the Fibro Finder scenario attached as job notes.
• Lab-result delivery: a NATA-accredited lab feed so "results within 48 hours" links to a real tracked sample, not a promise.
• Live reviews from their Google Business Profile, licence and insurance documents linked from the trust strip, and a real ABN/licence in the footer.

Techniques

• Single-file page: all CSS/JS inline, no build step, no raster images — every visual is SVG or CSS.
• Procedural SVG: house-and-yard elevation with pattern-fill hatching for lit zones, corrugated super-six fence, Perth metro service map with coast, river and a Welshpool base star.
• CSS-only motion: entrance rise choreography on a crafted cubic-bezier, pin pulse with a 0.55 opacity floor, verdict "stamp" micro-interaction on era swap — all disabled under prefers-reduced-motion.
• Token-invalidated staggered redraws (dual-speed via firstDraw), state probe window.__asbestos, v-flag-safe form patterns, [hidden]{display:none !important} guard.

Iteration log

← Back to the site · Collection index