How the Setpoint Height Safety page was made

01 — The signatureThe Clearance

One SVG building elevation. A roof edge runs across the top with the selected anchors set along it as cased hi-vis caps, and where a horizontal static line is specified it is strung between two end assemblies with the intermediate brackets at their computed positions. A worker 1.8 m tall stands at the edge, clipped on. Beneath them the fall-clearance stack falls from the roof edge in labelled bands — free fall, deceleration, harness stretch, the worker’s own height below the D-ring, and the safety margin — against the available drop drawn as a dimension line in arrest red.

The whole argument of the business is in that drawing: on a 2.0 m lanyard you need 8.15 m of air below you, and a Perth warehouse gutter is six. So where the stack reaches the ground before it has finished, the overrun is drawn below grade in the shortfall band and labelled in metres. Nobody who watches a stack drive into the dirt forgets it.

How it is built

The scene is assembled synchronously into seven named groups (gSky, gBuild, gStack, gDim, gRoof, gWorker, gLabels) every time the state changes, and the animation loop only ever writes attributes onto elements that already exist. Nothing is inserted into the SVG after the loop starts and no CSS rule animates a property that the same element also sets as a presentation attribute — both of those are known ways to get a scene that reports itself as painted while rendering nothing.

The metric frame is zoom-to-fit on the drop: always the clear drop plus 3.0 m of roof and parapet above and 1.0 m below grade, so it runs from a 7.0 m frame at the 3 m step to a 16.0 m frame at the 12 m step. The 1.8 m worker never changes size relative to that scale — at the 16 m frame they stand 11.3 % of the frame height, which is the smallest they get. Every clearance is held in integer centimetres and divided once at display; every price is held in integer cents. The price function asserts Number.isInteger on each line it returns and that the total is a whole dollar, and it throws rather than print a rounded lie.

The label column is a real dimension table: each component’s name sits over its figure, right-aligned, with a leader running to the band it measures. Rows are placed by a collision pass that reserves the gap budget of every row still beneath it, so the column is guaranteed to finish above the ground line no matter how far the stack overruns — the verdict chip in the ground band can never be reached.

Motion

On a cold load the stack drops in over 0.85 s on an ease-out cubic, driven from the animation loop as a scaleY transform about the roof edge, gated on a firstDraw flag with a settle-timer backstop. A resize never re-enters it. Everything after that is idle motion with a visibility floor: the red drop dimension breathes between 0.74 and 1.0 opacity, the lanyard and the static line sway on a shared sine, and the inspection tag hanging off the first anchor rocks with them. Under prefers-reduced-motion the loop never starts and the scene renders settled and complete.

02 — PaletteGalvanised zinc, an arrest lanyard, a hi-vis line

Argued straight off a Perth roof: the zinc-grey of Klip-lok sheet as the paper, the carbon of a drawn line as the ink, the red of an energy-absorbing lanyard as the accent, and the yellow-green of a hi-vis static line as a mark that never becomes a word. Every ratio below was measured from the shipped tokens in the running page with WCAG arithmetic, not read off the spec.

Zinc paper#E9EBEAThe page ground. Cool, no warmth in it at all — which is what keeps this off the cream-and-terracotta default.

Carbon ink#171B1E · 14.47:1 on paper · 17.33:1 on cardBody copy, every scene label, and the primary button fill under white type.

Muted ink#4A5257 · 6.65:1 on paper · 7.97:1 on cardSecondary prose. Derived here — the concept pinned no soft ink, so it was minted and measured.

Arrest red#B0402A · 4.85:1 on paper · 5.81:1 on cardDimension arrows, the shortfall band, the failing verdict, section rules. Clears as body copy unminted; white on it clears at 5.81:1, hover #8E3220 at 7.99:1.

Hi-vis#C6D42B · lines and marks onlyThe static line, the anchor caps, the lanyard, the worker’s vest, the Sapience band’s rule. Pinned never-text, and the build asserts that nothing on either page carries a word in it.

Sky#DDE3E6 · 13.37:1 with the inkThe void the fall happens in.

Roof sheet#B9C0C3 · 9.40:1The building’s cladding.

Structural steel#9AA3A8 · 6.75:1Deck band, mullions, roller shutter.

Shortfall band#E8C2B8 · 10.59:1The part of the fall that happens below ground level.

Clearance band#CFD9CE · 11.94:1The spare air, when there is any.

Ground#C9C4B8 · 9.96:1The surface you land on. The verdict chip sits on it.

Concrete apron#D6D2C7 · 11.19:1Added in the depth pass: the first surface below, which is literally what the drop is measured to.

The two rules that came out of measuring

Both were found by computing ratios the concept’s own table did not cover, and both changed the drawing.

No scene label is red. Arrest red measures 4.49:1 on the sky, 4.01:1 on the clearance band, 3.55:1 on the shortfall band and 3.34:1 on the ground — every one under the floor. So the accent draws lines and arrowheads, and the carbon ink carries every word in the scene. The only red type on the page sits on the zinc paper or a white chip, where it clears.
The static line ships cased. Hi-vis on sky is 1.26:1 — the product being sold would have been nearly invisible drawn straight onto the sky. It is drawn as a carbon stroke under a hi-vis core, which measures 10.61:1 against its own casing. The anchor caps and the lanyard are cased the same way.

04 — The modelInteger cents, and a drop that costs nothing

Everything the estimator does is arithmetic on pinned anchors. The rates and the minimums:

Line	Rate	Notes
Roof anchor, installed & tested	$290 each	Klip-lok. Concrete +$50, tile +$100 an anchor.
Leading-edge SRL anchor	+$120 each	New install only — on a recertification or a replacement we are not supplying the anchor.
Horizontal static line	$1,900 + $120/m	Two end assemblies, commissioned and tagged.
Intermediate bracket	$340 each	`ceil((m − 8) ÷ 8)` — 0 at 8 m, 1 at 12 and 16 m, 2 at 24 m.
Recertification	$150 + $40 each after	Plus $320 to inspect and re-tag a static line.
Anchor replacement	$240 each + $150	Attendance is one charge for the visit.
Register, tags & certificate	$120	Inside the minimum. There is no line outside it.
Minimum attendance	$890 / $290 / $490	Install / recertification / replacement.

Every worked figure, re-derived independently

The concept pins eight worked figures. Before trusting any of them I wrote a separate oracle from the rate table alone and enumerated the whole control grid — 104 checks, all green — then the headless harness drove the running page and compared it against that oracle again on every cell below. All eight reproduced exactly.

Full control vector	Total	Verdict
Rest — install · Klip-lok · 4 anchors · 12 m line · 2.0 m lanyard · 9 m drop · pack forced	$4,960	clears by 0.85 m
The same vector at a 6 m drop	$4,960	2.15 m short
install · Klip-lok · 1 anchor · no line · restraint · 6 m · pack off	$890	subtotal $290, minimum binds
recert · Klip-lok · 6 anchors · 12 m line · restraint · 9 m · pack forced	$790	—
recert · Klip-lok · 1 anchor · no line · restraint · 5 m · pack forced	$290	subtotal $270 — the grid floor
replace · concrete · 3 anchors · no line · restraint · 8 m · pack forced	$1,140	—
install · tile · 8 anchors · 24 m line · SRL · 12 m · pack forced	$9,660	2 brackets, clears by 7.10 m
install · tile · 12 anchors · 24 m line · SRL — dearest reachable	$11,700	—

The cheapest reachable output is $290, which is exactly the “from $290” floor on the recertification card in the services grid — the page never argues with itself. The clearance boundaries were enumerated over the whole stepper rather than spot-checked: the lanyard fails at an 8 m drop and passes at 9, the SRL fails at 4 and passes at 5, and restraint passes at every drop on the stepper because there is nothing to arrest.

Three controls that deliberately do not move the price

The drop stepper. Stepping it from 3 m to 12 m changes the drawing, the frame, the verdict and the shortfall, and leaves the total exactly where it was — a hardening assert sweeps all ten steps and requires the same figure. The reason is on the page: the drop changes the system you need, not what an anchor costs to fit.
The roof chip, on a recertification. All three roof types give the same recertification total, because we are testing what is there. The chip still redraws the roof — standing seams, a stippled concrete deck, a tiled profile — so it never silently no-ops; the on-page line is we test what’s there, the roof under it doesn’t change the test.
The SRL chip, off a new install. The $120 surcharge is a supply line, so on a recertification or a replacement the chip drives the clearance stack and the verdict and the ledger says why the price did not move.

The register pack: forced by either of two controls

The $120 register-and-tagging pack is a free toggle on exactly one cell — a new install with no static line. Everywhere else it is forced on and locked, either because the service is the certificate, or because a lifeline has to be commissioned and entered in the register before anyone clips to it. The pinned partial-unwind chain is driven in every pass and asserted step by step:

Step	Pack	Why
install + no line	off, free	the only free cell; the memory captures this
install + 12 m line	forced on	the line forces it
recert + 12 m line	forced on	now both constraints do
recert + no line	holds on	partial unwind — the service still imposes it
install + no line	restores off	both constraints lifted, the remembered value returns

The memory is cleared by any explicit change to the toggle while it is free; otherwise it survives until the lock lifts.

05 — DisagreementsWhere my oracle and the brief did not agree

Every pinned figure was re-derived from the rate table in an independent script before the page was trusted. All eight worked totals, both clearance boundaries, the bracket mapping, the grid floor, the dearest cell and the whole force chain reproduced exactly. Three things did not reconcile, and none of them was arithmetic. In each case the reading that reproduces the pinned endpoints was shipped, and the disagreement is written down here rather than quietly resolved.

1. The frame cannot hold every shortfall to scale

The view-fit rule pins the frame as always the drop plus 3.0 m of roof above and 1.0 m below grade. Separately, the shortfall is to be “drawn in the shortfall band fill below grade”. Enumerating the eight reachable shortfall states shows the two pins cannot both hold: the maximum shortfall is 5.15 m (a 2.0 m lanyard at a 3 m drop) and only two states — the lanyard at 8 m (0.15 m) and the SRL at 4 m (0.90 m) — actually fit inside a 1.0 m band. The other six overrun it, by up to five times.

Shipped: the frame pin is binding, because it is the reading that makes all three of its own endpoints exactly true — a 7.0 m frame at the 3 m step, 16.0 m at the 12 m step, and the 1.8 m worker at 11.3 % of the frame. The shortfall is drawn to scale while it fits the below-grade band, and where it does not, the band runs to the frame floor and terminates in a drafting break — the zigzag a certification drawing uses when something runs off the sheet — with the true figure printed beside it and an on-page ledger note stating how far past the sheet the stack runs. Nothing is ever drawn to a false length. Both branches are reachable and the harness asserts which one appears at every drop.

2. Badge line 2 has no pinned form for the no-line state

Line 2 is pinned as 4 anchors · 12 m line · Klip-lok with a ≤640 px short form of 4 anchors · 12 m · Klip-lok and a singular of 1 anchor. The line chip’s first option is no line, and the spec gives no wording for it.

Shipped: the full form reads N anchors · no static line · Klip-lok and the short form N anchors · no line · Klip-lok — the short form drops the noun exactly as the pinned pair does. Flagged so it can be pinned rather than re-derived next time.

3. “3,240 grid cells” is the nominal grid, not the reachable one

3 systems × 3 services × 3 roofs × 12 anchors × 5 line lengths × 2 pack states is 3,240, which is the figure in the brief. But the pack toggle is forced in fourteen of the fifteen (service, line) pairs, so only one of those pairs has two reachable pack states: the reachable cell count is 1,728. Not a disagreement about any number, but a builder enumerating reachable states gets a different total, so it is worth stating which convention the count uses.

Two further findings that were not disagreements so much as gaps the concept’s tables did not reach: the scene-fill contrast table measures every fill against the body ink but never the accent against those fills, and the hi-vis token’s legibility on the sky is never measured. Both are covered under Palette above, and both changed what got drawn.

06 — IterationThree passes, each one driving the page

Every pass loaded the page in headless Chrome, drove every chip, both steppers, the toggle and the form, and asserted the output against the independent oracle — plus one rapid-fire drive firing twelve control clicks in a single evaluate with no settle between them, to catch a stale closure racing a state swap. The final run is 319 assertions, all green.

Pass 1

Craft

A fatal CSS defect, caught by measuring rather than looking. Every clamp() in the stylesheet was written as clamp(2rem,1.16rem+3.5vw,3.3rem) — no whitespace around the +. CSS math requires it, so all four declarations were parse errors and were dropped: the h1 fell back to the UA’s 2em and the hero’s display figure rendered at inherited 16 px. It looked like a slightly small headline, not a bug. Reading the computed font-size off the running page found it in one call.
The static line sagged to the level of the anchor caps, so a lifeline read as lying on the deck. Raised to 2.5 cap-heights above the roof edge with the sag capped at a fraction of that height, so it can never reach the roof at any length.
The REQUIRED BELOW YOU summary row’s rule struck through the safety-margin figure above it. The row now reserves extra air and the rule sits clear.
At 375 px the trust signals sat below the fold. The trust line moved above the display stamp and the lede was cut by a third, so the business name, the trade, the area, both trust signals, the requirement, the verdict and the price are all visible without scrolling.
Measured every colour pair from the shipped tokens rather than the spec. All eighteen clear 4.5:1. The measurement also caught the Sapience band using the never-text hi-vis token as type — the emphasis is now white with a hi-vis underline rule, and the band carries a hi-vis top rule, so the accent is present as a mark and carries no word anywhere on either page.
Badge widened to 326 px with text-wrap:pretty on the note and declaration, which stopped the bracket note orphaning “m” onto its own line.

Pass 2

Depth

The elevation became a building. It was a grey slab; it now has a roller shutter with slats, a personnel door, a window band that skips any position the shutter occupies, a downpipe, and a concrete apron at its base — which is not decoration, it is the first surface below, the thing the drop is actually measured to.
A dashed extension line now ties the roof edge the worker is standing on to the top of the stack, so the drawing reads as one measurement rather than two adjacent columns.
Second read: an inspection tag hangs off the first anchor and sways with the lanyard. Its header is hi-vis on a new install, arrest red on a recertification, and it is struck through in red on a replacement — the tag tells you what we are there to do without a word on it.
Micro-interaction: the component breakdown under the ledger is a list of real buttons. Hovering or focusing one raises its band in the drawing, outlines it, and thickens the leader running to its label. It works from the keyboard, not just the mouse.
The entrance moved from linear to ease-out cubic, so the stack drops and settles rather than crawling. The worker got a hi-vis vest band — again a mark, not a word.
Where the stack runs past the bottom of the sheet, a ledger note now states how far past it runs and why the drawing breaks off instead of lying about the length.

Pass 3

Hardening

The composition defect the asserts could not see. At the small drops the stack overruns the ground, and the band centres the labels follow went below grade with it — dragging the label column into the ground band and straight over the verdict chip. Found by looking at a native-resolution capture of a 4 m drop. Fixed properly rather than nudged: the column is now bounded between the roof edge and the ground line, each row reserves the gap budget of every row still beneath it, and a band whose centre is below grade keeps its label inside the frame while the leader reaches down to it.
At 375 px the verdict chip’s right-hand fallback landed on top of the rotated shortfall dimension. It now falls back clear of the dimension column entirely, over the apron.
Chanel rule — one ornament removed: the building’s floor lines. With mullions, a window band, a shutter and a downpipe already on the facade they were a fifth system of lines competing with the one line the page is about.
Two map defects, both only visible in pixels: the “THE SPINE” label was buried under the Bayswater marker, and the Osborne Park label sat orphaned at the far left of the map with no leader to its dot. Both relocated, and the sweep now asserts that no two map labels collide and that every label sits within 90 px of a dot.
An automated label-collision sweep now runs six extreme states across 375/1000/1200 at two device pixel ratios, testing every drawn label against every other, every label against the ground line, and the verdict chip against every other label including the rotated ones. 18 states, zero collisions.
Verified the form’s pattern attributes by driving checkValidity on deliberately invalid values — a v-flag parse error leaves a pattern silently validating nothing, and reading the attribute proves nothing.
Confirmed the screenshot cannot break the page: the entrance is gated on a cold-load flag, a resize does not re-enter it, and a deliberately clipped capture — which changes device metrics and fires resize — leaves the entrance finished. After driving the controls and then waiting with nothing poking the page, every animated group is asserted opaque.

Two harness bugs, fixed in the harness

Worth recording because both would have dispatched a fix at a page that was correct. First, the collision sweep failed 18-for-18 on its first run: getBBox() on SVG text returns the full em box including ascent and descent leading, so a row’s own two deliberately stacked lines read as overlapping. Boxes are now shrunk to their ink height before testing. Second, the sweep filtered rotated labels out of the collision test entirely, which is exactly how the verdict chip landed on the rotated shortfall dimension unnoticed — rotated labels are now tested by client rect, which accounts for the transform.

07 — ConversionWhy the page is laid out the way it is

The phone is in the masthead and in a sticky bar, and neither says “Contact”. The bar reads Ring the yard and Price my roof — one tel: link and one in-page anchor to the form, both 50 px tall. Most of this traffic is a facilities coordinator standing in a carpark with a contractor who will not go up, and the fastest useful action is a phone call.
The price is inside the artwork, not below it. The badge sits on the drawing carrying the total, the verdict, the configuration, the bracket note and the screening declaration. It also prints in the hero stamp, so the figure survives any crop of the top of the page. Below 640 px the badge docks directly beneath the artwork instead of covering it, and switches to the pinned short forms — while the ledger and the screen-reader mirror keep the full templates at every width.
The estimator hands off to the form. The anchor count and the service pre-fill from the Clearance, and the configuration prints above the form and again in the confirmation recap. A visitor who has played with the drawing arrives at the form with the hard questions already answered.
The form asks six things, not twelve. Name, mobile, suburb, roughly how many anchor points, what they need done, and what is up there. The date is optional. Every field is something we would have to ask on the phone anyway; nothing on it is marketing data.
The confirmation is local and says so. It is hidden on load, stays hidden on an empty submit, and appears only after a valid filled submit — no fake network round-trip, and the panel says plainly that nothing was sent anywhere. The callback promise beside the form is static copy and deliberately not the confirmation.
The honesty clause is load-bearing, not a disclaimer. “Standard component figures — the numbers that bind are on your equipment’s tags” prints wherever the total does: hero, badge and ledger. The words compliant, certified safe and guaranteed never describe a computed verdict. The page says the system is installed and tested to the standard, which is a claim about our work, not about anyone’s fall.
The failing option stays selectable. Disabling the lanyard on a 6 m roof would hide the single most persuasive thing the page can show. Every system chip is live at every drop, and the drawing is allowed to fail.

08 — Local SEOThe schema we would ship for the real business

This demonstration page emits only WebPage, WebSite, CreativeWork and BreadcrumbList — nothing business-shaped. Publishing LocalBusiness or Review markup for a company that does not exist would put fictional data into a real index, so the markup a real Setpoint would ship lives here as a code sample instead. The organization type is HomeAndConstructionBusiness, which is the correct schema.org subtype for a height-safety installer.

<!-- would ship on the real site, not on this demonstration -->
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "@id": "https://setpointheightsafety.com.au/#business",
  "name": "Setpoint Height Safety",
  "description": "Roof anchor points, horizontal static lines, fixed ladders and guardrail — installed, tested and recertified across the Perth metropolitan area.",
  "url": "https://setpointheightsafety.com.au/",
  "telephone": "+61 8 9xxx xxxx",
  "priceRange": "$$",
  "image": "https://setpointheightsafety.com.au/img/static-line-osborne-park.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit x, xx Example Road",
    "addressLocality": "Bayswater",
    "addressRegion": "WA",
    "postalCode": "6053",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.92, "longitude": 115.92 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "06:00", "closes": "15:00"
  }],
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    { "@type": "Place", "name": "Bayswater" },
    { "@type": "Place", "name": "Osborne Park" },
    { "@type": "Place", "name": "Malaga" },
    { "@type": "Place", "name": "Welshpool" },
    { "@type": "Place", "name": "Canning Vale" },
    { "@type": "Place", "name": "Como" },
    { "@type": "Place", "name": "Joondalup" },
    { "@type": "Place", "name": "Rockingham" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Height safety services",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Roof anchor supplied, installed and tested to AS/NZS 5532" },
        "priceSpecification": { "@type": "PriceSpecification", "price": "290.00", "priceCurrency": "AUD",
          "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Horizontal static line, two end assemblies" },
        "priceSpecification": { "@type": "PriceSpecification", "price": "1900.00", "priceCurrency": "AUD",
          "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Annual anchorage recertification and tagging" },
        "priceSpecification": { "@type": "PriceSpecification", "price": "290.00", "priceCurrency": "AUD",
          "valueAddedTaxIncluded": true } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "68"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "A real, named, consenting customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "datePublished": "2026-03-11",
    "reviewBody": "Eleven expired points retested and tagged in a morning, two replaced on the spot, register in my inbox by three."
  }]
}

The rating and the reviews above are the shape of the markup, not values we would invent — on a real build they come out of the client’s own Google Business Profile or review feed, and they only ship once there is something true to put in them.

The rest of the local-search work for a business like this is unglamorous and matters more than the markup: a Google Business Profile with the right primary category and the service area actually drawn, a page per service where the search intent genuinely differs (roof anchor installation, anchor point recertification, static line installation), a page per suburb only where there is real work to show for it, and the standards named the way tradespeople and facilities managers type them — AS/NZS 1891.4, AS/NZS 5532, WorkSafe WA.

09 — For the real clientWhat would change on day one

Their photographs. The elevation is procedural because this is a demonstration and the collection ships no raster images. A real Setpoint has better assets than any illustration: a static line on a Canning Vale gutter run, a tagged anchor with the date visible, a load tester on the sling. The drawing stays — it is the explainer — and the photography goes around it.
Their job management system. The form is a local demonstration. In production it posts into whatever they already run: ServiceM8 or Tradify for a four-van operation, simPRO or AroFlo once the asset register and scheduled recertifications outgrow a spreadsheet. The Clearance configuration goes across as job notes, so the office gets the anchor count, the roof type and the line length without a second call.
The register becomes the product. The single highest-value integration for this trade is the recertification diary: every anchorage carries an annual due date, so the asset register in simPRO or AroFlo should be generating the callback list, not a person remembering. A client portal showing the roof register and each point’s test date and certificate is the retention mechanism for the whole business.
Their reviews. The three on the page are demonstration copy. A live build pulls the Google Business Profile feed and marks up only what is genuinely there.
The estimator stays honest. The rates would be theirs, and the same rule applies: anything that cannot be priced from the controls prints a declaration rather than a number. Bad access, live plant, a crane, a permit or an engineered anchor design are all conversations, and the page should say so instead of guessing.