Generative Assets · Industry demonstration 389

A written standard sets a dimension, and the dimension sets the price

Flueline Heating is a fictional Maida Vale wood heater and flue installer. Its customers are hills families with a heater in the shed and a quote that keeps coming back as “depends on the flue”. The page has one job: turn that sentence into a phone call, by drawing the section and letting AS/NZS 2918 do the arithmetic in public.

$5,390 · 5.0 M FLUE · 600 OVER RIDGE · MEASURED FROM THE RUNNING PAGE

The signature

The Clearance

The centrepiece is an SVG section through a single-storey house — floor, hearth, heater, rear wall, ceiling, roof space, roof plane, ridge, sky — redrawn from scratch on every state change. Everything on it is at true scale. Nothing is a stock illustration; there is not one raster pixel on either page.

The point of the drawing is the flue’s height, and the reason it costs what it costs. AS/NZS 2918 asks a solid-fuel flue to finish at least 600 mm above the point where it comes through the roof, and at least 600 mm above any part of the roof within 3 m of it horizontally. On a normal gable the second clause is the one that bites. So the drawing shows the 3 m span as an ember bracket on the roof plane, marks the highest roof point inside that span with a ringed dot, and runs an ember dimension line up from that point to the cowl. That dimension is always exactly 600 — enumerated over all 205 reachable geometry cells — and everything else on the page is downstream of it.

The behaviour a viewer notices on the second visit

Inside 3 m of the ridge, the ridge is the highest roof in the span, so the two tangent terms in the length formula cancel and the flue length stops depending on the pitch altogether. Tile 22.5° at 0.5 m, tile 30° at 2.0 m and Colorbond 15° at 3.0 m all compute 4.80 m at a 2.7 m ceiling. Walk the flue past 3 m and the ringed dot visibly steps off the ridge and down the roof, the dimension re-anchors to it, and the flue gets shorter. The badge’s second line changes with it — “terminating 600 mm over the ridge” becomes “over the highest roof within 3 m”.

How it is drawn

Plain SVG built with createElementNS, no libraries at all — no three.js, no GSAP, no canvas. The whole scene is assembled synchronously in one pass and the entrance choreography is driven from the animation loop itself (a staggered opacity ramp over eight groups), never by post-hoc DOM insertion or class toggles, because a scene assembled after the loop starts can receive no paint invalidation in headless Chrome. First draw gets a 110 ms stagger and a 420 ms ramp; every later state change redraws snappy at 34 ms and 190 ms, so a stepper tap reads as response, not lag.

The fire is a three-path flicker with a radial firebox gradient, a pulsing ember glow and a soft light spill on the floor in front of the heater; a heat shimmer rises past the cowl. The flame’s opacity never drops below 0.66 of its base, so the signature is visibly alive at any capture instant rather than being phase-tuned to one. The loop clamps its delta at zero and caps it (dt = min(max(now − last, 0)/1000, 0.05)), pauses on document.hidden, and under prefers-reduced-motion: reduce never starts at all — the scene renders one settled frame at full opacity instead of a blank.

The frame fits itself to the state

The section is zoom-to-fit. The frame’s height in scene units is the ceiling, plus 2.4 m of ridge above it, plus the computed cowl height, plus a metre of sky — 6.53 m at the shortest state and 9.33 m at the tallest. A 1.7 m figure stands beside the heater, always drawn 1.7 m in scene units, so it visibly shrinks as the ceiling and the flue grow. That is the honest constant reference: no drawn cap anywhere, because the enumerated ranges prove nothing can overflow the frame.

Measured scene geometry, read from the running page’s state probe
Viewport	Scene box	Scale	Frame	Badge
375 px	309 × 408	51.8 px/m	7.53 m	docked beneath the section
1000 px	926 × 640	81.2 px/m	7.53 m	on scene, full templates
1200 px	645 × 593	75.3 px/m	7.53 m	on scene, full templates

One deviation worth naming. The published frame formula treats the metre of sky as fixed. With a compliance plate measured at runtime (177 px tall at 1200 px, taller when the cathedral note appears) that is not always enough clearance above the roof line, and shrinking the drawing to make room would have made the small states illegible. So the frame height is treated as a minimum: where the measured badge needs more room the sky grows, and the drawn subject and the proportional scale are never touched. At the rest state no growth is needed at all. The binding contract is the rectangle test — the badge’s box must never cover anything drawn — and the harness proves it by hit-testing 221 points across the badge’s footprint against the painted geometry, not against SVG bounding boxes (a diagonal roof path’s axis-aligned box covers the whole sky corner and produces a phantom collision every time).

Palette

A cold room with one warm thing in it

Argued from a Perth hills morning: cold slate light on the ground, black ink for type, ember only where the fire and the rules are, flue zinc for the steel. That temperature contrast is the whole page — the structure is cool, and the two places heat appears are the firebox and the standard. Every ratio below was measured with WCAG arithmetic from the shipped tokens, not estimated.

#E4E8EACold slate light — page ground. Body ink reads 13.61:1 on it.

#191E23Black ink — body copy and the primary CTA. White on it: 16.78:1 (hover #0F1317, 18.65:1).

#C2521BEmber — firebox, clearance envelope, dimension lines. Marks only: 3.77:1 as text.

#9A3D0CEmber ink — every ember-coloured word. 5.59:1 on the ground, 6.89:1 on cards, 5.83:1 on the sky.

#A8440FEmber button fill under white labels: 6.00:1 (hover #8A360B, 8.04:1).

#4C6A7DFlue zinc — flashing, chip outlines, dimensions. White on it 5.73:1; as small text on the ground 4.65:1.

#5E7382Flue steel. Takes white labels (4.94:1) — the body ink measures 3.40:1 on it and is never used there.

#B7ADA4Roof tile (7.61:1 under body ink). Colorbond is #8E9AA0, 5.82:1.

The ink and line split, and the pairs that had to be re-minted

Ember is a lines-and-marks token. Every ember word on either page uses the deeper ember ink instead, and every ember button uses the deeper fill so the hover pair stays comfortable.
Two tokens moved during Pass 1 after measuring. The disabled-chip ink shipped at #79848B and measured 3.49:1 on the disabled ground; re-minted #667179 at 4.56:1 (5.00:1 on white for the disabled stepper buttons). The timber-floor label measured 4.14:1 on the floor fill; re-minted #4E3E27 at 5.07:1.
Scene labels are body-ink class and carry a ground-coloured halo through paint-order: stroke wherever they cross a fill: 4.81:1 for the zinc dimension ink on the roof space, 5.83:1 for ember ink on the sky, 7.02:1 in the room air.
Service-area map labels use the body ink with a halo of whichever fill they cross — 14.77:1 over the metro land, 13.03:1 over the hills wash, 5.88:1 for the ocean label. The palette’s mid-tone tokens never label a map.

Type

Cast iron, a workhorse, and one voice for numbers

Zilla Slab at 700 carries every heading and the big figure. It is a slab with warmth and no nostalgia, argued from the cast lettering on a firebox door — heavy enough to hold a $5,390 at 4.7 rem, and square enough that it never reads as a wedding invitation. Figtree does all the work: body copy, chip labels, form fields, the badge’s second line. It has real character at 16 px on a phone, which is where most of this traffic lives.

Space Mono at 400 appears in exactly one role: dimensions and dockets. Every scene callout, every eyebrow, every ledger amount and the badge’s 5.0 M FLUE · 600 OVER RIDGE line is set in it at wide tracking. Restricting a third face to one job is what stops it reading as decoration — on this page mono means “this is a measurement”.

The typographic bravery is the dimension itself: the rest-state total set enormous against the sky, with the mono dimension string running beneath it at 0.24 em tracking. When the billed metres change, that mono line flashes once from the button ember to the text ember and settles its tracking — 620 ms, one keyframe, killed entirely under reduced motion. It is the only decorative animation on the page.

The model

Where the number comes from

The ridge sits a pinned 2.4 m above ceiling level and the spigot at 0.9 m. At a horizontal distance d from the ridge on a roof of pitch θ, the required flue is

L = ceiling + 2.1 − d·tanθ + min(d, 3.0)·tanθ

billed length = ceil(L × 2) ÷ 2        (half metres, rounded up)
flue charge   = billed × $186          ($186 ÷ 2 = $93, so every billed
                                        length is a whole dollar by construction)

Inside the 3 m span the two tangent terms cancel and L = ceiling + 2.1 regardless of pitch. The per-roof ridge-distance caps are derived, not invented: the roof surface meets the ceiling plane at 2.4 ÷ tanθ, so the penetration cannot sit further out and still come through the roof — 5.5 m on tile 22.5°, 4.0 m on tile 30°, 5.0 m on Colorbond 25°, and no cap in effect on Colorbond 15° (its 8.96 m eave is past the stepper’s own 6.0 m maximum).

Every figure below measured from the running page and cross-checked against an independently reimplemented oracle
Scenario	Required	Billed	Total	What it proves
Rest — freestanding, tile 22.5°, 2.7 m ceiling, 2.0 m out, existing hearth, metro	4.80 m	5.0 m	$5,390	3,480 + 640 + 930 + 340
Same cell, Perth hills	4.80 m	5.0 m	$5,390	identical — the zone pair is price-neutral by design
Same cell, south-west & Great Southern	4.80 m	5.0 m	$5,390 + travel quoted	the computable subtotal still prints
Re-flue, tile 22.5°, 2.4 m, 5.5 m out	3.46 m	3.5 m	$2,611	the cheapest output anywhere in the model
Install only, same cell	3.46 m	3.5 m	$2,911	services-grid floor
Freestanding, same cell	3.46 m	3.5 m	$5,111	services-grid floor
Inbuilt, same cell	3.46 m	3.5 m	$5,891	services-grid floor
Freestanding, tile 30°, 3.6 m ceiling, 1.0 m out, stone hearth, hills	5.70 m	6.0 m	$6,516	the cathedral note appears at this ceiling
Inbuilt, Colorbond 25°, 3.0 m, 4.0 m out, hearth pad, metro	4.63 m	5.0 m	$6,590	past the span — the flue has shortened
Colorbond 25°, 2.4 m, 5.0 m out	3.57 m	4.0 m	$5,204	the governing point has stepped off the ridge

One correction to the concept, found by re-deriving rather than trusting. The brief pinned the Colorbond 15° at 6.0 m cell as “required 3.90 m”. The pinned model gives 2700 + 2100 − 6000·tan15° + 3000·tan15° = 3,996.15 mm — 4.00 m to two decimals. The billed length (4.0 m) and the total ($5,144) in the brief were both right; only the displayed required length was wrong, and it was the single figure in that chain nobody had enumerated. The page ships the measured 4.00.

Controls that cannot change the price, and say so

The zone pair is deliberately flat. Perth metro and the Perth hills cost exactly the same, in all 2,050 priced cells of the grid. That is not a missing feature — it is the argument the business is making, and the declaration appears on the badge, in the ledger and in the plain-text mirror wherever the total does.
The re-flue disables both paid hearths and forces the hearth to existing, with the reason on the card. The prior choice is remembered and restored on the way back — $6,250 → $2,890 → $6,250 — and an explicit hearth click while forced clears that memory.
The south-west zone prints no travel number, because the honest figure depends on what else is booked in the autumn run. The badge prints the computable subtotal plus the declaration, never a bare “quoted”. The $0-subtotal case is unreachable: the cheapest computable subtotal anywhere is $2,611.
Above a 3.3 m ceiling a note appears — not a charge and not a disable. Scaffold tower, in the rate, tell us if the ceiling is raked. It is absent at 2.4, 2.7 and 3.0 m, and the harness asserts the absence on all three surfaces, not just the presence on two.

The partial unwind, driven by two different controls

The ridge-distance cap can be imposed by more than one roof chip, which is what makes the unwind partial. From Colorbond 15° at 6.0 m ($5,144): switching to tile 30° forces the distance to that roof’s 4.0 m cap and remembers 6.0 ($5,377). Switching to Colorbond 25° relaxes the cap to 5.0 m — but 6.0 is still invalid, so the page holds 4.0 m rather than stepping through an intermediate ($5,297). Switching back to Colorbond 15° lifts the cap to 6.0 and restores it ($5,144). A second force never overwrites a memory already held, and any explicit move of the stepper clears it: force to 4.0, step down to 2.0, go back to Colorbond 15°, and the distance stays at 2.0.

Conversion

Why the page is shaped like this

The price is inside the artwork. The total is painted onto a compliance plate riveted to the flue casing — the same object a real installer leaves behind — and it is also set enormous in the hero column. At 1200 px the section’s box runs y 148–741 and the plate sits at y 160, so both are inside the first 750 px. The thumbnail is the commercial argument; a ledger below the fold does not make the capture.
The plate docks at 640 px and below. On a phone it moves out from over the drawing and sits directly beneath it, still inside the signature’s container, carrying the pinned short forms. From 641 px up it sits on the scene against the sky beside the cowl and carries the full second line and the full cathedral note. The ledger and the plain-text mirror carry the full templates at every width regardless.
Four declarations live on the plate as one-line fine print, the way a real compliance plate reads, and in full in the ledger and the accessibility mirror. Putting 200 characters of prose on a riveted plate would have pushed it to roughly 350 px tall and eaten the sky it needs to clear the roof at every state — so the plate keeps the short forms and the two surfaces that have room carry the full ones.
The form is the configurator’s handoff. Ceiling height, roof type and the job description are pre-filled from whatever the visitor built, including the computed figure and the billed metres, and stop being overwritten the moment the visitor types in them. Seven required fields, front-end only, with a designed confirmation panel that is hidden on load, still hidden after an empty submit, and shown only after a valid one. No network round trip is faked.
The estimator’s cheapest output equals the services grid’s floor. $2,611 is both the cheapest cell in the 6,150-cell grid and the “from” price on the re-flue card, so the page never argues with itself. Same for $2,911, $5,111 and $5,891.
Click-to-call in the masthead, a sticky call/quote bar below 1000 px, 44 px minimum tap targets, and the whole above-the-fold block — name, promise, price, both CTAs and a trust line — visible at 375 px without scrolling.

The three passes

What each pass actually found

Pass 1 · Craft

The drawing was telling small lies

The roof plane ran past the point where it meets the ceiling and kept descending under the room, hidden only because the room-air rectangle painted over it. Fixed by clamping the roof to the eave plus a 450 mm overhang, clamping the room, ceiling and roof space to the eave, and drawing the external wall there — the section is now a complete house rather than a fill that happens to cover its own mistake.
Three label collisions at 1000 px that no state assert could see: “CLEARANCE ENVELOPE” struck through the 1.7 m figure and the ceiling dimension; the ridge-distance dimension sat above the roof surface at the flue end because its y was derived from the ridge rather than the penetration, so its label crossed the roof; and the rotated flue-length callout ran through the ceiling plate.
Measured contrast moved two tokens: the disabled-chip ink 3.49:1 → 4.56:1 and the timber-floor label 4.14:1 → 5.07:1.
The map had two unlabelled grey diagonals doing nothing, and the Maida Vale star sat on top of the scarp line it is meant to sit at the foot of.

Pass 2 · Depth

Making the rule visible instead of merely true

Added the governing-point marker: a ringed ember dot on the highest roof inside the 3 m span. Inside the span it sits on the ridge; past it, it visibly steps down the roof and picks up the label “highest roof in the span”. That single dot is what makes the pitch-independence readable rather than merely correct.
Added the floor light spill in front of the heater, pulsing in phase with the firebox glow, and moved the fire to a three-path flicker with a never-invisible floor.
Added the badge micro-interaction: the mono dimension line flashes once and settles its tracking whenever the billed metres actually change, so a stepper tap that moves the price says so.
Refined the entrance easing from cubic to quartic ease-out and re-composed the frame: the drawing is now centred in the frame whenever the height cap leaves it wider than the section needs, instead of leaving a dead right-hand quarter at wide viewports.

Pass 3 · Hardening

The states nobody looks at

At the top of a capped ridge stepper the penetration sits at the eave, so the drawn external wall sliced the heater in half and the clearance envelope ran outside the house. The section is now simply cropped before the wall in those cells — a part section, which is what an architect would draw — and the stepper’s own reason line explains the cap.
On a Colorbond 15° roof at 6.0 m the roof space pinches almost shut at the flue, and the rotated flue-length callout had nowhere to live. It now falls back to a horizontal callout in the room below the ceiling when the roof space is under 70 px.
“3 M SPAN” sat on the ember bracket at steep pitches and on the roof itself at shallow ones. It now clears the bracket’s diagonal by exactly the rise across its own width, so it lands in sky at every pitch and never collides with the governing-point label when the two share an anchor.
“YOUR HEATER” ran into the 1.7 m figure on the install-only and re-flue chips; the figure now steps 660 mm further out whenever a heater tag is present.
Ornament removed (the Chanel rule): the on-scene “CLEARANCE ENVELOPE” caption. The dashed ember box with 300 REAR and 450 SIDE says it without words, and the words moved to a ledger footnote and the accessibility mirror where they cost nothing.
Verified: 375 px masthead clearance measured wordmark-right against call-button-left; no horizontal overflow on either page at 375; visible focus rings on every control; DPR-2 native-resolution screenshot review at 375, 641, 1000 and 1200; the reduced-motion path proved by two screenshots 1.4 s apart being byte-identical.

How it was verified

An independent oracle re-derives the model from first principles — the roof-plane equation rather than the published closed form — and runs 3,167 checks over the full control grid: 6,150 priced cells, zero non-integer subtotals, the four derived caps, pitch-independence at all 120 in-span cells, monotone shortening at all 85 past-span cells, and every reachability claim the copy makes. A headless harness then drives the running page through 341 asserts: every worked example with the full control vector set explicitly rather than inherited, the hearth force chain, the ridge partial-unwind chain, memory invalidation, both stepper bounds on all four roofs, two rapid-fire drives with no settle between clicks, empty and filled submits (clicking button[type=submit] specifically), both form patterns proved by driving checkValidity on deliberately invalid values, and the badge-clearance hit test at four widths. Zero console errors on both pages.

Local SEO we’d implement for the real business

This demonstration ships only WebPage, WebSite and BreadcrumbList structured data. Marking up a fictional business with LocalBusiness and Review data would put invented trading details into a real search index, which is dishonest markup no matter how good the demo looks. So the schema we would ship for a real Flueline Heating lives here as a code sample instead.

The top-level type is HVACBusiness — a real schema.org organization subtype and a genuine fit, since heating is literally in its scope. The solid-fuel specialty is named through additionalType, knowsAbout and a hasOfferCatalog rather than by inventing a type that does not exist.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HVACBusiness",
  "additionalType": "https://www.wikidata.org/wiki/Q1076184",
  "name": "Flueline Heating",
  "description": "Wood heater and flue installation across Perth and the Perth hills. Freestanding and inbuilt slow-combustion heaters supplied and installed, flue kits, re-flues, hearths, and a sweep and service before winter.",
  "url": "https://fluelineheating.com.au/",
  "telephone": "+61 8 9000 0389",
  "email": "jobs@fluelineheating.com.au",
  "image": "https://fluelineheating.com.au/img/maida-vale-workshop.jpg",
  "logo": "https://fluelineheating.com.au/img/logo.png",
  "priceRange": "$$",
  "currenciesAccepted": "AUD",
  "paymentAccepted": "Cash, EFTPOS, Bank transfer",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit 3, 118 Sample Road",
    "addressLocality": "Maida Vale",
    "addressRegion": "WA",
    "postalCode": "6057",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.9366, "longitude": 116.0261 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "06:30", "closes": "16:00"
  }],
  "areaServed": [
    { "@type": "City", "name": "Kalamunda" },
    { "@type": "City", "name": "Mundaring" },
    { "@type": "City", "name": "Roleystone" },
    { "@type": "City", "name": "Midland" },
    { "@type": "City", "name": "Bayswater" },
    { "@type": "City", "name": "Armadale" }
  ],
  "knowsAbout": [
    "AS/NZS 2918 solid fuel appliance installation",
    "AS/NZS 4013 heater emissions compliance",
    "Twin-wall flue systems and roof flashings",
    "Hearth construction and clearances to combustibles"
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Wood heater and flue services",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Freestanding heater supplied and installed" },
        "priceSpecification": { "@type": "PriceSpecification",
          "minPrice": 5111, "priceCurrency": "AUD", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Flue replacement and re-flue" },
        "priceSpecification": { "@type": "PriceSpecification",
          "minPrice": 2611, "priceCurrency": "AUD", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Flue sweep and service" },
        "priceSpecification": { "@type": "PriceSpecification",
          "price": 220, "priceCurrency": "AUD", "valueAddedTaxIncluded": true } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "83" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "A real, named customer" },
    "datePublished": "2026-06-14",
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "Drew us the section, showed us why it needed five metres and not three, and the number never moved."
  }]
}
</script>

The two bolded blocks only ship with real reviews behind them. Rating and review markup must reflect reviews the business actually received and displays. On the demonstration the same three testimonials are plain copy on a page that declares itself fictional, and they are deliberately not marked up.

Beyond the schema, the real build would carry: a Google Business Profile with the Maida Vale service area and the autumn south-west run declared as a service area rather than a second location; suburb landing pages that are genuinely different from one another (a Kalamunda page about raked ceilings and jarrah, a Mundaring page about flues that rust at the flashing); the AS/NZS 2918 explainer from the FAQ expanded into the piece that earns the links, because “why does my flue have to be that long” is the question the whole trade gets asked; and seasonal pages that go live in February for the sweep run and in May for breakdowns.

Handover

What would change for a real client

Their photographs. Every visual here is drawn in code, which proves the layout carries without stock imagery — but a real installer has better assets than we can draw: the flue coming through a Colorbond roof at 7am, the compliance plate on the casing, the hearth cut to a heater’s footprint. The section stays; it is the thing no competitor has.
Their real prices behind the same model. The arithmetic is the deliverable, not the numbers. Swap the four heater fees, the kit, the per-metre rate, the four flashing prices and the hearth options and the whole page re-prices itself, including the services grid’s “from” floors, which are computed from the grid rather than typed.
Scheduling and job management. Tradify or ServiceM8 for the diary, the quote and the autumn service run — the enquiry posts straight in as a lead with the configured section attached, so the installer opens a job that already has the ceiling height, the roof and the flue metres on it. simPRO where the business carries real heater and flue stock and wants the kit consumed off the job.
Warranty and compliance. The heater supplier’s warranty portal for registrations on the day, and the compliance certificate emailed from the same job record rather than written on a docket book.
Reviews and accounting. A live Google review feed replacing the demo testimonials (and only then the rating markup above), and Xero for the invoice, with the deposit taken against the quote the customer already agreed to on this page.
Analytics that answer one question. Which configured states turn into calls. The state probe this page exposes for testing becomes the event payload: heater type, roof, ceiling, ridge distance, computed total.

Ledger

What is real and what is invented

Real: AS/NZS 2918 (installation of domestic solid-fuel burning appliances) and AS/NZS 4013 (emissions compliance for wood heaters) are genuine Australian/New Zealand standards, and the 600 mm and 3 m clauses are described here as they actually work. Perth suburbs, the Darling Scarp, and the fact that some WA local governments require a building permit for a solid-fuel heater are all real.
Invented: the business, the people, the prices, the eighteen winters, the reviews, and the phone number — which uses the reserved (08) 9000 0xxx pattern. The ABN and licence strings are visibly placeholder-patterned. Addresses are suburb-level only.
Simplified: a real quote also weighs the appliance manufacturer’s own clearance table, the roof’s condition, ceiling insulation and access. The page says so on the plate, in the ledger and beside the form: chimneys, asbestos ceilings and second-storey penetrations are priced on site, not on this form.