Counterweight Crane Hire — how it was made

01Palette — hardstand noon

Argued from the yard at midday: sun-bleached concrete, boom steel in shadow, the stencilled counterweight, and the laminated load chart on the cab door. Signal red on warm concrete — deliberately distinct from scaffolding’s safety-orange-on-sky and every other wave palette.

Derived inks per the collection’s ink/line split: #9A2B1F red-ink and #2E5175 blue-ink for small text (≈6.5:1 and ≈5.9:1 on concrete), #6A6459 soft body ink (≈5:1). The bright red stays on lines, fills and the one primary button.

02Type

03The Lift Planner — signature

Load chips (trusses 0.8 t / pool shell 2.5 t / spa 3.5 t / plant 1.2 t), a 6–26 m radius stepper and a dogman toggle drive a procedural SVG lift elevation: the pick-and-carry drawn with its boom telescoping to the chosen radius over a single-storey house profile, the load slung under the hook, the radius chalked on the concrete, and a laminated load-chart panel in the corner with the red capacity curve, the dashed 90% plan line and the working point plotted live. The whole scene is one innerHTML-built SVG group; positioning lives on outer <g transform> wrappers while CSS animates inner elements only (load sway, chalk pulse — never the same node that carries an SVG presentation attribute). First render gets the entrance stagger; subsequent chip/stepper redraws re-animate only the boom, load, chalk and chart under 600 ms, and the static scenery doesn’t re-fade.

The card under the scene is the honest half: crane class, chart capacity at the radius, utilisation, the plan-limit rule, the metered price, and — when the maths demands it — the step-up to the 60-tonner with the reason written out. The chart-honesty line ("the crane’s actual load chart on the day is the law") is always on-card. The planner’s spec pre-fills the booking form.

04The capacity model — derivation & measured figures

Illustrative of a 25 t pick-and-carry class per the spec: capacity ≈ min(25, 90 / radius) tonnes; the 60 t slew runs min(60, 260 / radius). Figures are indicative and the page says so on-card. On top of the chart sits a 90% plan margin: the planner never books a lift past 90% of chart. That margin is how real hire desks plan (a lift above ~90% is critical-lift territory), and it is also the only reading under which the spec’s own worked example computes — at 24 m the 25 t chart holds ≈3.8 t, which would technically “hold” a 3.5 t spa, but the spec’s card text says the spa needs the 60 t there. With the 90% margin (plan limit ≈3.4 t) it does. Documented correction, not a guess.

Two more documented decisions. Displayed rounding: the spec’s illustrative “at 26 m ≈ 3.4 t” truncates 90/26 = 3.46; the page displays one-decimal rounding, ≈3.5 t — the measured figure ships. Pool shells past 20 m: the services grid promises “over two storeys or past 20 m it’s honestly a 60 t job”, but a 2.5 t shell never crowds the 25 t chart inside the stepper’s range — the constraint is boom height over the dwelling, not tonnes. So the planner carries an explicit height rule (pool shell + radius > 20 m → 60 t, with the boom-height reason on-card), keeping the signature and the services copy telling one story.

05The pricing model — shape & verification

• 25 t pick-and-carry: $230/hr × 4-hr minimum = $920, + metro travel $190 each way = $380 the round trip → half-day all-in $1,300. Every load type shares this meter — the load changes the crane, never the rate. That flatness is deliberate and stated on the page.
• 60 t slew: $340/hr × 6-hr minimum = $2,040 + $650 establishment = $2,690. It floats in, so there is no travel line — the establishment replaces it, said on-card (spec-pinned meter inheritance).
• Dogman/rigger: $98/hr, billed for the crane’s minimum hours — 4 hr on the 25-tonner (+$392), 6 hr on the 60 (+$588). The spec pinned only a 4-hr minimum; billing the crane’s day is the honest resolution (a dogman doesn’t go home at hour four of a six-hour lift) and it’s documented on-card.
• Floor contract: the planner’s cheapest output — any load at short radius, dogman off — is measured at $1,300, equal to the services grid’s “lifts from $1,300” floor. Asserted in the harness against an independently reimplemented oracle across 28 load × radius scenarios, plus the dogman totals ($1,692 / $3,278) and both step-up rules.
• Worked examples, measured: trusses (0.8 t) @ 14 m → chart ≈6.4 t → 25-tonner, $1,300 ✓ (matches the spec’s arithmetic). Rest state: pool shell @ 16 m → ≈5.6 t chart, 44% utilisation, $1,300 showing ✓.

06Conversion decisions

• Planner beside the h1, price card inside the first 750 px at 1200 wide — the signature shares the thumbnail viewport with the value proposition; the working figure ($1,300) is the first number a visitor reads.
• Two CTAs above the fold at 375 (book + call), header tel:, and a fixed call/quote bar with ≥48 px targets on mobile — crane emergencies are phone calls.
• Form fields match how a lift is actually booked: name, phone, suburb, a real type=date (min today) for the lift date, load select synced with the planner chips, “over what?” and access notes — the two questions every hire desk asks first. The planner’s spec line rides along read-only.
• Local confirmation only — “we’d call you back within two business hours”, echoing the spec, suburb and date. No fake network round-trip.
• Honesty as trust strategy: wind stand-down, power-line exclusion zones, the free site check that would rather say no on the phone — the trade’s real risk vocabulary is the credibility.

07Local SEO we’d implement for the real business

This demo ships only WebPage schema naming it a demonstration — fictional structured data in a real index is dishonest markup. For a real operator we’d ship LocalBusiness + Review schema like this (shown here as a code sample, not emitted):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Real Crane Hire Co",
  "telephone": "+61-8-xxxx-xxxx",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Kewdale",
    "addressRegion": "WA",
    "postalCode": "6105",
    "addressCountry": "AU"
  },
  "areaServed": "Perth metropolitan area",
  "openingHours": "Mo-Sa 06:00-17:00",
  "priceRange": "$$",
  "review": {
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewBody": "Genuine review text from a verified job."
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "87"
  }
}
</script>

Plus: Google Business Profile with service-area suburbs, per-service landing sections with honest price anchors (exactly as this page models), and review capture wired to the job-completion event.

08What would change for the real client

• Assignar — crane and crew allocations behind the booking form, so a request lands on the actual calendar.
• SafetyCulture (RIIHAN-aligned lift-plan templates) — the documented lift plan generated from the same radius/load inputs the planner captures.
• Geotab — float and crane tracking; “the crane’s 20 minutes out” SMS beats any status page.
• MYOB/Xero — hire invoicing off the docket, with the same meter lines the planner shows.
• VOC / induction records — verification-of-competency on file per operator, licence numbers real instead of placeholders.
• Podium — review flow replacing the demo reviews with a live feed.
• Their photos and drone footage could replace nothing structural — the procedural scene stays as the planner; photography would join the reviews and trust strip.

09Iteration log