A calculator that refuses to sell you a wall.

The single argument

Every acoustic sales page in the world quotes an Rw and stops. Rw is a laboratory single-number rating of one wall system in one test chamber with no flanking — it is not your result. So this page does three things a normal quote page won’t:

• It prints the simplification wherever the verdict appears. “This is a screening figure. Rw is a laboratory single-number rating and the real level difference also depends on the room, the area and every flanking path around the wall. We measure before we quote for real.” That sentence is on the readout, in the ledger, in the plain-text mirror, and in short form on the on-scene badge.
• It draws the flanking path. A dotted violet arc leaves the source room, goes over the wall and lands in the receiving room, captioned FLANKING — AROUND THE WALL, NOT THROUGH IT / NO Rw FIGURE SEES THIS. A MEASUREMENT DOES. The honesty clause is a picture, not just a disclaimer.
• It refuses. Whenever the computed gap is positive, the measurement & report line is forced on and locked with the reason “our own screening says this doesn’t get there. We’re not selling you a wall on that — we measure first.” Three separate controls can impose that lock — the build, the source, and the receiving room.

And the words “compliant”, “certified” and “guaranteed” never describe a computed verdict anywhere on the page. The Rw and Ctr figures are called what they are: indicative of the tested system, not a promise about your wall.

The model

Three integers and one comparison. No rounding anywhere, because there is nothing to round.

rating   = Rw + (source is bass ? Ctr : 0)
arriving = sourceLevel − rating
gap      = arriving − assignedLevel        (positive = over, negative = under)

Bass sources — a home gym, a band, a rooftop condenser — take the Ctr low-frequency spectrum adaptation term. Television and conversation don’t. That one branch is why a wall that fixes a neighbour’s talking does nothing at all for their drum kit, and the page says so in the FAQ.

The 16 mm resilient channel and the 22 mm furring channel are standard trade depths the concept did not pin; they are declared here because the drawing dimensions them on screen and an undeclared dimension would be a made-up number.

baseline build → construction $0, no attendance, no minimum
otherwise  construction = area × rate
                        + (sealing ? area × $46 : 0)
                        + (door    ? $1,450     : 0)
                        + $780 attendance, setout & make-good
           construction = max(construction, $2,400 minimum job)
total = construction + (report ? $1,250 : 0)

Sealing, the door and attendance sit inside the $2,400 minimum. The report sits outside it — it is a deliverable, not a day on site, and it is the only line you can buy on its own. Money is held in integer cents and divided by 100 once, at display; the estimator returns whole dollars in every one of the 4,800 grid cells.

Three forces, and the one that matters

Each toggle remembers its pre-force value. The memory is cleared by any explicit change the user makes while the control is free; otherwise it survives until the lock lifts. On a partial unwind — the constraint relaxes but the remembered value is still invalid — the forced value is held, and only restored when the memory becomes valid again. The full pinned chain, driven step by step in the harness:

Verified end to end: unwind[0…6] gap, force and effective value all asserted after driving the real chips.

The pinned refusal is the sharpest state on the page. Drive a band rehearsal into a bedroom at 35 dB(A) and every build is over — existing +36, insulated +27, resilient +20, discontinuous +12, masonry +11. So the page stops quoting and says: “no wall on this page gets a rehearsal room to 35 dB(A) in a bedroom. That job is a room within a room and a floor, and it starts with a measurement, not a quote.” The estimator still prices the construction — we’ll build it as part of a bigger scope — but the refusal is what leads.

Three places my oracle disagreed with the spec

Before trusting a single number in the brief I reimplemented the whole model from the pinned anchors in a separate script (oracle-acoustics.mjs) — 4,800 grid cells, every worked figure, every force, every reachability claim the prose makes. Seventy-eight of eighty checks reproduced the document exactly. Three things did not, and none of them were silently changed on either side: I shipped the reading that reproduces the pinned endpoints and recorded the disagreement here.

Palette

Argued from the materials in the wall: the pink of an insulation batt, the plaster grey of board and skim, and the violet-slate of a sound field that has no colour of its own. Every ratio below was measured from the shipped tokens in the running page — getComputedStyle on the real elements, then WCAG arithmetic — not transcribed from the brief.

Worst pair actually used anywhere on the page: 6.13:1 (Sapience band copy #DEDBEC on violet). Twenty-three measured pairs, zero below 4.5:1.

Held off the three AI-default palettes deliberately: no cream and no lone terracotta (a plaster-mauve ground with a rose paired to a slate violet), no near-black field with an acid accent (a light page with two argued mid-tones), and no broadsheet hairline columns (the structure is the layer stack, and there is not a single column rule on the page).

Type

• Syne 700/800 — display. An idiosyncratic geometric with unusually tight counters, argued from a trade whose entire subject is what fits in a cavity. It carries the wordmark, the h1, the compliance margin and the badge’s first line.
• Lexend 400/500 — the workhorse. Body copy never drops below 16px on mobile; the estimator’s controls and the form are all Lexend.
• Spline Sans Mono 500 — in exactly one role: acoustic and dimensional figures. Rw 52 · Ctr −7 · 35 dB(A), every layer thickness, every axis tick, every eyebrow. Nothing that is not a measurement is set in mono.

The typographic moment is the rest-state margin: 12 dB at display scale with UNDER THE ASSIGNED LEVEL beneath it in tracked mono, sitting in the hero beside the Rw, the arriving level and the price. It turns violet when you’re under and rose when you’re over, and the caption changes with it — including “EXACTLY ON THE ASSIGNED LEVEL” for the one reachable zero-gap state. Ctr is printed with a real typographic minus (U+2212), not a hyphen; the first build of this page shipped hyphens and the harness caught it against the pinned string.

How the Wall is built

No library. One inline SVG, hand-assembled as a string and written in a single synchronous innerHTML pass, plus vanilla JS and CSS. Nothing is fetched but the three Google fonts.

True scale in a deliberately fixed frame

The wall band is fixed at 240 mm of true scale and the selected build is drawn centred inside it. That is the whole point of the drawing: a zoom-to-fit frame would make a 110 mm wall and a 225 mm wall look identical, which is the one thing this section must never do. Instead the five builds are directly comparable as you click across them — the baseline occupies 46 % of the band and the block wall 94 %. The decibel axis above is fixed at 0–100 dB(A) for the same reason, and the enumeration confirms every reachable state lands inside it: arriving levels span 13–71 dB(A) and the assigned levels are 35/40/45.

Units per pixel, not units per anything else

The viewBox width is chosen from the container’s measured width — VW = clamp(430, cw × 1.4, 1200) — and everything typographic is then authored in rendered pixels and multiplied by upx = VW / cw. That means an 11px label renders at 11px at 375 and at 1200, instead of shrinking to an unreadable 4px inside a fixed 1200-unit viewBox. Horizontal geometry is a fraction of VW so the drawing grows with the page; vertical geometry is in rendered pixels so the section band stays the constant height the concept argues for.

Dimensions that dock beneath

The thinnest drawn layer is 10 mm — far narrower than the two digits that dimension it — so every thickness label is placed beneath the band on a greedy multi-tier ladder with a leader tick: each label takes the highest tier where it doesn’t collide with the last label placed on that tier, up to four tiers. At 375 the discontinuous build’s three 13 mm boards spread across three tiers; at 1200 they fit on two. The harness sweeps every <text> bounding box in the SVG against every other one at 375/1000/1200 for all five builds and fails on any overlap greater than half a pixel.

Labels that know how much room they have

The strip’s row labels drop to their short form (SOURCE, ARRIVING) only when the long form would collide with the value at the right; the room names print inside the rooms only when the rooms are wide enough, and otherwise the orientation moves to a drawing note beneath the section where it always fits; and the flanking caption steps down a three-rung ladder of shorter strings rather than run under the wall it is describing. All three are measured, not breakpointed.

The badge earns its clearance

The price badge sits on the artwork at ≥641px and docks beneath it at ≤640px. The scene reserves a top band whose height is the badge’s measured getBoundingClientRect().height plus margin — never a guessed aspect ratio — and the materials key hangs off the bottom of that band, so the clearance the badge needs buys the drawing a legend instead of white space. The binding contract is asserted directly: the badge’s rectangle must not intersect the rectangle of any drawn group, tested at 375, 1000, 1200 and at DPR 2.

Motion

One rAF loop owns everything. It advances the sound-path phase (a sine whose receiving-side amplitude is the arriving level over the source level, so the wave visibly shrinks by the rating) and it drives the entrance by setting opacity attributes on the scene groups — the drawing is never assembled by deferred DOM insertion or class toggles, which is what has historically left SVG groups unpainted in headless Chrome. The delta is clamped at zero as well as capped. Entrance choreography runs on a cold-load firstDraw flag with a settle-timer backstop; subsequent state changes redraw snappy (11 ms stagger, 520 ms cap) and a resize never re-enters it — taking a clipped screenshot changes device metrics and fires resize, and that is how a previous wave photographed an empty scene while every state assert stayed green. The standing assert drives the controls, waits with nothing poking the page, and then requires every animated group opaque.

The second read

Hover any layer band and it outlines in rose and names itself above the wall. It’s the detail nobody notices on the first visit and everybody uses on the second — and it let the drawing carry six material names without printing six labels on top of the section.

The three iteration passes

Pass 1 — Craft

• The vertical layout was in the wrong unit. The whole scene’s y-geometry was authored in rendered pixels and then emitted straight into a viewBox measured in units. Every vertical distance was wrong by the units-per-pixel factor. Found by reading the code back rather than by any assert; fixed by pushing all of it through u(px).
• Ctr printed with a hyphen, not a minus. 'Ctr ' + r.b.ctr renders Ctr -7; the pinned string is Ctr −7. A ctrTxt() formatter now emits U+2212 at all nine print sites (the probe keeps the raw integer).
• 375 px ledger overflow. The estimate row’s value is nowrap, and the $0 state’s value is a 48-character sentence — 116 px of real overflow, masked from scrollWidth by an ancestor. Fixed with a wrapping total row and min-width:0 on the label.
• The thumbnail composition was weak. A five-line display h1 pushed the drawing to y≈650 at 1200, so the 1200×750 capture showed copy and a sliver of decibel bar. The brand line was cut to one display line with the promise in the workhorse face, and the whole readout — the 12 dB margin, the Rw, the arriving level, the price and the declaration — moved into the hero’s right column. The drawing now starts at y≈490 and the price appears twice inside the first 750 px, in the hero and on the badge.
• 375 label collisions. Row labels ran into their values, ASSIGNED 35 dB(A) ran into the axis unit caption, the room names ran under the wall, and the single-line drawing note was 787 units wide inside a 480-unit frame. Fixed with measured short forms, a two-line note, and deleting the axis unit caption outright — the values already say dB(A) three times.
• Control grid dead space. A plain two-column grid left ~200 px of white under the area stepper because the extras column was taller. Explicit row/column placement put the three scenario groups in one column and the extras in the other.
• Double full stops where a pinned reason ending in “.” was interpolated before another “.”, in both the ledger and the a11y mirror. A dropDot() helper now trims the reason at the join.
• Contrast measured from the shipped tokens, not the concept’s numbers: 23 pairs, worst used pair 6.13:1. The concept’s figures all reproduced exactly.

Pass 2 — Depth

• The materials key. The badge’s W44 clearance band was 130 px of white. It now carries a per-build legend — only the materials the current build actually contains, in the fills the drawing actually paints — hung off the bottom of the band. It made the honesty argument better too: you can see at a glance that the discontinuous build has a cavity and the baseline has none.
• The flanking path. A dotted violet arc from the source room, over the wall, into the receiving room, with the caption FLANKING — AROUND THE WALL, NOT THROUGH IT / NO Rw FIGURE SEES THIS. A MEASUREMENT DOES. The page’s declared simplification stops being a disclaimer and becomes a drawing. Its caption steps down a ladder of shorter forms so it never runs under the wall.
• Layer hover. Rose outline plus a named tag above the wall, on a nested group with no opacity presentation attribute of its own so the entrance loop and the CSS transition never fight.
• Entrance easing. The opacity ramp was linear; it is now 1 − (1 − p)³, which reads as a settle rather than a fade.
• The sound path attenuates honestly. The receiving-side amplitude is arriving ÷ sourceLevel of the source-side amplitude, floored so it never disappears — the wave is visibly a third the size at the rest state and two-thirds the size on the baseline wall.

Pass 3 — Hardening

• Automated label-collision sweep. Every visible <text> in the SVG is bounding-box-tested against every other one, at 375/1000/1200, for all five builds — 30 checks — plus a frame-escape check. It found the flanking caption’s two lines overlapping by a pixel and the bracket label sitting 9 px from the arriving row at 375. Both fixed.
• 375 masthead checked first, explicitly: the wordmark’s right edge against the call button’s left edge. A non-breaking space in the brand line was forcing 116 px of overflow; removed, and the brand now wraps to two lines at phone width by design.
• Chanel rule. Removed the dotted straight line drawn through the wall on the sound path’s axis — the flanking arc now carries the “path” idea better, and the wall bands read cleaner without it.
• Reduced motion: no entrance, no phase advance, settled true immediately, everything opaque, and the wave holds a stable frame (asserted by comparing the path data 600 ms apart).
• Resize and DPR: a resize rebuilds the geometry without re-entering the entrance, and the badge-vs-drawing rectangle assert runs again at DPR 2.
• Form pattern proved by driving it, not by reading it: checkValidity() is called on a deliberately invalid value and on a real number. Chrome compiles pattern as a v-flag regex, where an unescaped literal inside a character class is a parse error that silently kills validation.
• Rapid-fire drive: twelve control clicks dispatched in one evaluate with no settle between them, then a settle, then the landed state re-checked against the oracle. Any control that rebuilds scene data invalidates the in-flight entrance in the handler, before the state swap.
• Final copy read across the whole page, the ledger and the plain-text mirror.

The harness ends at 255 assertions, 0 failures: the rest state, seven pinned worked figures, the five-build refusal sweep, the seven-step partial-unwind chain, all three forces driven from each of their imposing controls, a 180-cell driven grid sweep against an independently reimplemented oracle, the rapid-fire drive, the settle-visible assert, liveness, empty and filled submits, the 375 masthead and sticky bar, three-width screenshots, DPR 2, reduced motion, and the label-collision sweep.

Conversion decisions

• The estimator is the hero, not a page-three widget. An acoustics enquiry usually starts with a number the customer half-believes (“the builder said Rw 50”). Putting the drawing and the verdict above the fold lets them check that number in ten seconds, which is the moment the call happens.
• Two CTAs, one voice each. The header carries the tel: link because half this traffic is a phone in one hand; the mobile sticky bar carries Ring Osborne Park and Book a screening — a real tel link and a real in-page anchor to the form, both 56 px tall. The copy is the trade’s, not a keyword list.
• The form is short and the screening rides along. Name, phone, suburb, what you’re dealing with, and what you can hear and when. The configured scenario travels in a hidden field and is shown beside the form as a read-only card — deliberately not pre-filled into a required field, because that would half-satisfy the form and mask the empty-submit validation.
• The confirmation is local and honest. Hidden on load, hidden on an empty submit, shown only after a valid filled submit — and it says “Demonstration page — nothing was sent”. No fake network round-trip.
• The refusal is a conversion feature. Telling a strata council the floor is the problem before they spend $40,000 is the single most persuasive thing this business could put on a website. The estimator’s hardest state is the one that wins the job.
• Six price anchors, and the cheapest output equals the grid floor. The estimator’s cheapest non-zero total is $1,250, which is exactly the services grid’s “measurement & report — from $1,250”. Asserted, so the page can never argue with itself.

Local SEO we’d implement for the real business

This demonstration ships only WebPage, CreativeWork, WebSite and BreadcrumbList in its live JSON-LD — putting a fictional LocalBusiness with fictional reviews into a real search index would be dishonest markup, and the demo reviews are never marked up as structured review data. For a real client we’d ship this instead, with their own verified details:

{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "@id": "https://quietlineacoustics.com.au/#business",
  "name": "Quietline Acoustics",
  "description": "Acoustic treatment and noise assessment across Perth's inner and western suburbs.",
  "url": "https://quietlineacoustics.com.au/",
  "telephone": "+61 8 XXXX XXXX",
  "priceRange": "$$",
  "image": "https://quietlineacoustics.com.au/img/party-wall-section.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit N, Example Street",
    "addressLocality": "Osborne Park",
    "addressRegion": "WA",
    "postalCode": "6017",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.90, "longitude": 115.82 },
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    { "@type": "AdministrativeArea", "name": "City of Stirling" },
    { "@type": "AdministrativeArea", "name": "City of Subiaco" }
  ],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "08:00", "closes": "16:30"
  }],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Noise control services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Field measurement and report to ISO 16283" },
        "priceSpecification": { "@type": "PriceSpecification", "price": "1250", "priceCurrency": "AUD",
                                "valueAddedTaxIncluded": true } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Resilient channel party wall system" },
        "priceSpecification": { "@type": "UnitPriceSpecification", "price": "246", "priceCurrency": "AUD",
                                "unitCode": "MTK", "unitText": "per square metre" } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "38"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "A real, verified customer" },
    "datePublished": "2026-05-14",
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "Measured our party wall and the report is what got the builder back."
  }]
}

Every value above would come from the client’s own records: the rating and review count from their Google Business Profile, the reviews pulled from a verified feed rather than typed in, and the offer prices from the same rate table that drives the estimator — one source of truth for the page, the schema and the quote.

What would change for the real client

• Their rates, one source of truth. The five build rates, the two extras, the attendance figure and the minimum live in a single object. Point it at the client’s price list and the estimator, the services grid, the ledger and the schema’s offer prices all move together.
• Their tested systems. The Rw and Ctr figures would come from the manufacturers’ actual test reports for the systems they install — Gyprock, Knauf, USG Boral, Rondo — with the report reference printed beside each build, which is a stronger version of the honesty clause this page already makes.
• Their job flow. The enquiry, with its screening payload, into ServiceM8, simPRO, Tradify or AroFlo as a job with the scenario in the notes, so the tech arrives knowing which wall they’re looking at. Quotes out of Xero against the same rate table.
• Their booking. Measurements are the constrained resource, and night-time assigned levels have to be measured at night — a two-calendar availability feed (day install crew, evening measurement) rather than a generic booking widget.
• Their measurement data. The best version of this page replaces the screening estimate with the client’s own measured level-difference history by build type and wall construction, so the “screening figure” language can eventually be backed by “here is what we actually measured on 60 of these”.
• Their photography. Everything here is procedural SVG because the collection ships no raster assets. A real build would keep the section drawing — it is the sales tool — and add photographs of the channel going on and the sealant going in around it, which is what convinces a strata committee that the detail was done.