How it was madeThe Window: a day of grain moisture, drawn against somebody else's line.

The signature — the Window

One SVG band chart, midnight to midnight, on a fixed 24-hour axis. Three registered layers sit on it: the grain-moisture trace for the kind of day you picked; CBH's 12.5 % receival standard as a dashed line that never moves; and beneath them a verdict strip of 48 half-hour cells, each lit if the sample is under the line and washed amber if it isn't. Under the strip, brackets measure each run — which is how the fire-danger day shows its 7.0 hours as 2.0 + 5.0 with the shire's harvest and vehicle movement ban hatched between them. A row of day blocks counts the job out beneath the axis.

The axis is fixed on purpose. Rescaling it, or the 12.5 % line, would destroy the only thing the chart is for: showing how much of a day the moisture actually gives you. The smallest drawn window — six hours on the humid day — is 25 % of the axis, about 250 px of band at 1200 wide and 83 px at 375, legible at both.

The trace is built from the window rather than fitted to it. Each day pins a night moisture, a driest sample and its hour, and a window [a, b]; the curve is cosine-interpolated through (0, mNight) → (a, 12.5) → (low, mLow) → (b, 12.5) → (24, mNight), monotone within each segment, so it crosses the rule exactly at a and b and nowhere else. The verdict strip then counts its own lit cells, and the page asserts that count equals the pinned half-hours. The window is geometry, not a stored number.

The whole scene is laid out in real pixels — one scene unit is one CSS pixel at every width, so a 14 px label is 14 px at 375 as well as at 1200. The plot re-derives its geometry on resize (shorter trace band and a 6-hourly axis on a phone, day blocks wrapping into rows so the pinned 14-block cap holds), and the scene's height is a function of the measured height of the estimate badge, so the badge can never sit over the drawing. Below 641 px the badge docks beneath the artwork instead.

The numbers

Money is held in integer cents and divided by 100 once at display; the window is held in half-hours, the machine rate in deci-hectares per hour and the yield in tenths of a tonne. That is not fussiness: 400 * 4.6 is 1839.9999999999998 in IEEE doubles, and a $6.50 per-hectare line is exactly the kind of rate that breaks a later comparison.

The floor in the capacity line is load-bearing and is what the page bills and draws: 6.8 ha/h across a 13.0 h window is 88.4 hectares, and the page says 88. The $650 float for 60–150 km sits outside the $4,500 minimum job charge (it's a separate movement, not machine time); the yield surcharge, the chaser and the cartage sit inside it. Every per-hectare line multiplies the actual hectares and the cartage line multiplies the actual tonnes — the minimum is a dollar floor, never a hectare floor.

Every figure on the page was re-derived in an independent oracle written from the rate card, which enumerates the full 32,256-cell control grid: 0 non-integer intermediates, 0 totals that aren't a whole dollar, 1,320 cells where the minimum binds, cheapest priced output $4,500 (which equals the services grid's floor), dearest $331,650, longest job 91 days. 63 oracle asserts and 564 headless asserts against the running page, all green.

Where our arithmetic disagreed with the brief

Three places. In each one the page ships the reading that reproduces the pinned endpoints, and the disagreement is written down here rather than quietly resolved on either side.

Two smaller notes, neither a disagreement. The longest job's maximum (91 days) is reached at 3.5 and 4.0 t/ha — they share the heavy machine-rate band — and the dearest cell ($331,650) is reached on a 40 ft front as well as a 60 ft, because at 4.0 t/ha the yield has already forced the chaser. Neither maximum is unique.

Palette

Argued from the hours the job actually happens in: a green-black paddock with the header lights on, the amber of a sodium yard light and a dew hour you can't take grain in, and the cold blue of the hour the sample comes back under twelve-five. Ratios below are measured with WCAG arithmetic from the shipped tokens in the running page, not from the spec.

Both accents clear 4.5:1 as text on their own grounds unminted, so neither needed the split ink/line pair. One measured fact governed the labelling: window blue on the harvestable band fill measures 3.95:1, so no blue text is ever set on that fill — every label crossing a scene fill is the light ink, and the map's town labels carry a night-ground halo through paint-order: stroke.

Held off the AI defaults deliberately: it is a dark site rather than cream-and-terracotta; it carries two argued mid-chroma accents on a green-black ground rather than one acid note on neutral near-black; and it has no hairline rules at all — the structure is the hour axis.

Type

Space Grotesk 700 for display — a technical grotesque with just enough irregularity to read like an instrument face rather than a corporate one. Commissioner 400/500/600 as the workhorse: a humanist sans that stays legible at 16.5 px on a phone in a paddock. IBM Plex Mono 500 in exactly one role — times, moistures, rates and hectares (23:00 · 9.8 % · 2.0 t/ha) — so a figure always looks like a reading off a machine.

The typographic moment is the rest state's harvestable window set enormous over the chart — 13.0 h at 64 px with HARVESTABLE beneath it in tracked mono, with the estimate and the day count stamped beside it. The scale is deliberate rather than 16/24/32: 11.5 / 13 / 14.5 / 16.5 / 18.5 / 22 / 29 / 39 / 44 / 64.

Conversion decisions

• The chart is the hero, not below it. At 1200 the page is a two-column hero: the promise and the CTAs on the left, the whole Window — trace, verdict strip, badge and day blocks — on the right. The entire signature and the price badge sit inside the first 750 px, which is the viewport the collection's thumbnail is captured at. That is asserted, not eyeballed.
• The price lives on the artwork. A ledger below the fold doesn't make the capture, so the estimate badge sits in a reserved band on the chart itself, and the figure also appears in the readout rail beside the big hours figure.
• Two CTAs, in the trade's order. A grower with a paddock standing rings; a grower planning a program fills a form. "Get a date on the board" leads, "Ring the shed" sits beside it, and the mobile sticky bar carries both — a tel: link and an in-page anchor to the form, both 48 px tall.
• Form fields are the ones a booking actually needs — name, phone, nearest town, hectares standing, crop, roughly when, and a free-text box that prompts for access, powerlines and distance to the bin. No email, because a wheatbelt contractor rings back. The date is optional; everything else validates on submit with a visible message under the field.
• The estimator hands off to the form. "Send this run to the form" pre-fills hectares, crop and a plain-English summary of the run, which turns a demo interaction into a warm lead. It fires only on that click, so the form is genuinely empty on load.
• The controls that don't change the price say so. The day chip and the front chip both change how long we're on your place and never the per-hectare rate, and each carries its sentence on the page. The chaser bin locks on above 3 t/ha or behind a 60 ft front, with the reason printed under the switch.

Honesty

The business never promises a grade, a receival outcome or a yield. The calculator prices the machine and the operator and nothing else; the receival declaration prints wherever the total does — badge, readout rail, ledger and the plain-text mirror — and 12.5 % is named as CBH's instrument every time it appears. The yield figure is the grower's to set, and the page says the header's monitor is the one that counts. No claim about grain quality, grade, or what the grower will be paid appears anywhere, and the page says plainly that it doesn't give agronomic advice.

The real institutions stay real, because that is the honest choice: CBH receival standards and the shire-declared Harvest and Vehicle Movement Bans made under the Bush Fires Act 1954 (WA). The fictional parts are visibly fictional: the phone number uses the reserved (08) 9000 0xxx pattern, the ABN and registration are placeholder-patterned, the address is suburb-level, and the three reviews are demo copy that is never marked up as structured review data. The only live JSON-LD on the site is a WebPage naming it a demonstration.

Local SEO we'd implement for the real business

The demonstration page deliberately ships none of this, because fictional structured data in a real index is dishonest markup. For a real operator we'd ship the block below. There is no agricultural-contractor subtype in schema.org, so the honest top-level type is LocalBusiness — inventing a subtype would be the same dishonesty in a different place.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Headerline Contract Harvesting",
  "description": "Contract grain harvesting across the eastern wheatbelt.",
  "url": "https://headerline.com.au/",
  "telephone": "+61 8 9000 0397",
  "priceRange": "$$",
  "image": "https://headerline.com.au/img/header-cunderdin.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Lot 41 Quairading Road",
    "addressLocality": "Cunderdin",
    "addressRegion": "WA",
    "postalCode": "6407",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.652, "longitude": 117.240 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
    "opens": "05:00", "closes": "23:00"
  }],
  "areaServed": [
    { "@type": "City", "name": "Cunderdin" }, { "@type": "City", "name": "Meckering" },
    { "@type": "City", "name": "Tammin" },    { "@type": "City", "name": "Kellerberrin" },
    { "@type": "City", "name": "Quairading" },{ "@type": "City", "name": "Merredin" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Contract harvesting",
    "itemListElement": [
      { "@type": "Offer", "name": "Contract harvesting, wheat or barley",
        "priceSpecification": { "@type": "UnitPriceSpecification",
          "price": "68.00", "priceCurrency": "AUD", "unitCode": "HAR" } },
      { "@type": "Offer", "name": "Chaser bin and operator",
        "priceSpecification": { "@type": "UnitPriceSpecification",
          "price": "6.50", "priceCurrency": "AUD", "unitCode": "HAR" } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "38" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "A real named grower, with permission" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "Fourteen hundred hectares in eleven days, second header on it from day four."
  }]
}
</script>

Alongside it: a verified Google Business Profile with the harvest-hours override, seasonal posts through September–January, the service-area towns as real destinations rather than a keyword list, and the reviews fed from the profile so the aggregateRating is always something a person actually wrote.

The three passes

What would change for the real client

• Their rate card, once. The whole model is one object of integer cents at the top of the script — crop rates, the heavy-crop step, the chaser and cartage lines, the float bands and the minimum. Changing a season's rates is one edit, and the chart, the ledger, the badge and the mirror all follow.
• Their machine data. The hectares-per-harvestable-hour table is where a contractor's real experience lives. We'd build it from their own paddock records — most operators already have the hours and hectares in their header's monitor exports.
• The board becomes a real booking. The form posts to whatever they already run — Tradify, ServiceM8 or AroFlo for the job card; Figured or Xero for the invoice; a simple Make.com or n8n hop if they'd rather it landed in a shared inbox with the estimator's summary attached.
• The yield and moisture maps. The files the page promises are already coming off a John Deere Operations Center or Trimble/Case AFS account; we'd hand them over from a per-client folder rather than a USB on the last afternoon.
• Their reviews and their photos. The reviews feed from the Google Business Profile, and the procedural artwork gives way to their own machines — although the Window stays, because no photograph of a header can answer "how many hours will you get tomorrow".
• Live ban status. The fire-danger day is a chip here; for a real operator it would read the shire's current harvest and vehicle movement ban declaration, which is the single most useful thing this page could do in January.

Techniques

No libraries. Inline SVG, CSS gradients and vanilla JavaScript in one self-contained file — the concept is a measured technical drawing, and a drawing you can label, dimension and assert beats a WebGL scene you can only look at. No raster images anywhere: the service-area map, the band chart and every mark on the page are procedural.

The scene is assembled synchronously once — 48 verdict cells, 14 day blocks, two run brackets, the trace, the markers — and every subsequent state change only sets attributes. Entrance choreography is driven from the animation loop itself rather than by post-hoc DOM insertion or class toggles, which is the only construction that reliably paints in a headless renderer. A single requestAnimationFrame loop moves one thing: a clipped gradient sweeping along the harvestable cells, on a 6.4 s cycle with the band itself always at full opacity, so the signature is visibly alive at any capture instant without any phase arithmetic.

State lives on window.__harvesting — the scenario, every computed figure in its integer unit, the badge lines, the active notes and a settled flag — so verification gates on state rather than on elapsed seconds.