How Nighthaul was made

Concept

Towing is the wave's most call-first trade: nobody on a shoulder fills in a form. Every design decision routes to the phone — header call button, hero call CTA, sticky mobile call bar, a call button inside the price card, and a form that literally says "on the shoulder now? Don't type — call." The signature Tow Planner exists to make the price honest before the phone rings: a procedural SVG night-shoulder scene (tilt-tray mid-load, rotating beacon, kilometre posts) driven by job chips, a distance slider and a day/after-hours toggle, with a mono price card that shows the exact meter.

The mood is the moment the beacon appears in the mirror — relief, not crash drama. Wet bitumen after rain, calm competence in high-vis, and real institutional safety numbers (Main Roads 138 138, 000) above the fold because that is genuinely correct advice.

Palette — beacon-amber night

A wet-bitumen green-black, deliberately distinct from the collection's other dark sites (locksmith's navy porch-light, signage's plum dusk, earthmoving's iron dusk, concreter's wet-slab charcoal). Every colour is argued from the shoulder at 2am.

Type

The Tow Planner — technique

The night-shoulder scene is one hand-built SVG (660×400): sky gradient, sodium haze, guardrail, wet road with an amber reflection column, and a tilt-tray truck drawn in side profile with the tray tail on the bitumen. Three vehicle silhouettes (sedan, motorcycle in its wheel cradle, mini-excavator chained at four corners) sit on the tray incline and swap per job chip — toggled via setAttribute('hidden') with the [hidden]{display:none !important} guard, because SVG groups have no .hidden IDL property (LEARNINGS W13).

• Rotating beacon: SMIL animateTransform on an inner group whose outer group carries the position attribute — attribute state and animation never share an element (LEARNINGS W16/W17). The glow circle's SMIL opacity keyframes are 0.55→1→0.55, so the beacon's key visual never drops below the 0.5 visibility floor at any capture instant (measured min across a sampled sweep: 0.56).
• Kilometre posts: six posts beyond the guardrail, one per 10 km; the slider lights their amber caps progressively and updates the in-scene "24 KM · LOADED" tag.
• Live readout: the scene's top-left carries the current job and estimate ("BREAKDOWN · DAY / $264") so the thumbnail sells the meter, not just the art.
• Second-read detail: the towed sedan's hazard lights blink — the same "hazards on" the safety strip tells you to switch on.
• Reduced motion: JS strips every SMIL node and parks the sweep at a fixed angle with the glow at full opacity — a settled, complete scene, nothing blank. No canvas/WebGL is used anywhere, so there is no DPR or context-loss surface; animation is SMIL/CSS only, cheap on a 4G phone.

The planner exposes window.__towing (job, km, time, total, form status) as the QA state probe, and every planner interaction pre-fills the callback form's job and details fields — the estimator becomes a warmer lead (the W12 handoff contract). Pre-fill fires only on interaction, so a fresh load still fails an empty submit on every field (W15).

Pricing model — shape and derivation

Pinned anchors from the spec: breakdown from $180 day including the first 10 km loaded then $6/km; after-hours (8pm–6am) +$70 flat; motorcycle from $160; machinery from $450 (to 4.5 t); accident = insurer-directed; holding yard first 3 days free then $25/day. The base is the pinned minimum for each job — no hidden delivery line.

Derived (not spec-pinned): the spec pins only the motorcycle and machinery bases, so both jobs inherit the breakdown meter's distance shape — first 10 km in the base, then $6/km. That flat per-km across jobs is shipped as a deliberate pricing statement: the kilometres cost the truck the same whatever's on the tray; the base carries the job's real difference (cradle gear, ramps and chains). The after-hours surcharge is deliberately flat across all jobs ("the driver getting out of bed is the surcharge — it's flat, not a meter").

Disabled with a reason (W18): the accident chip switches the card to claim guidance and disables the distance slider and time toggle, because after a crash the insurer usually directs and pays for the tow — a number quoted here would be theirs to set. Uninsured drivers are told plainly they get the same breakdown meter. All figures were verified against an independently reimplemented oracle in the harness, at rest and across four driven scenarios.

Conversion decisions

• Call-first everywhere: five call surfaces (header, hero, price card, form panel, sticky bar) versus one demoted form. For this trade the form is honestly framed as "for booked jobs and quotes" — transfers, auctions, machinery, insurance tows — never the emergency path.
• Safety strip above the fold: shoulder-safety advice with real institutional numbers (Main Roads 138 138, 000) sits directly under the masthead. The reserved (08) 9000 0xxx pattern applies only to the fictional business's own number — a wrong hazard-report number would be the dishonest choice (W12).
• Form fields: name, phone, pickup suburb, job type, job description — the minimum a dispatcher needs to quote a booked lane. Empty submit raises validation on all five; filled submit shows a local "Thanks — received / we'd call you back within 15 minutes" confirmation that plainly says no truck is rolling in a demo.
• 375px first: value prop, call CTA and trust line all inside the first screen; the sticky bar pairs a full-width call button with a "Plan a tow" jump; every tap target ≥44px.
• Honest anchors: the planner's cheapest possible output ($160 motorcycle) equals the services grid's floor, and the FAQ's worked example is the same $264 the resting planner shows — one source of truth across every surface (W14).

Local SEO we'd implement for the real business

This demo ships only WebPage schema naming itself a demonstration — fictional LocalBusiness/Review markup in a real index would be dishonest. For a real operator we'd ship:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AutomotiveBusiness",
  "additionalType": "https://en.wikipedia.org/wiki/Towing",
  "name": "Real Towing Co",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Welshpool",
    "addressRegion": "WA",
    "postalCode": "6106",
    "addressCountry": "AU"
  },
  "areaServed": "Perth metropolitan area",
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
    "opens": "00:00", "closes": "23:59"
  },
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "187"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Fed from the live Google reviews profile."
  }]
}
</script>

Plus a Google Business Profile wired to the review flow, suburb-level service pages for the towing head terms, and 24-hour structured hours so the "open now" panel works at 2am — when this trade's customers actually search.

What would change for the real client

• Dispatch & job management (Towbook-style): jobs from the call or the form land on a live dispatch board with driver assignment and status.
• MTData / Geotab fleet tracking with live-ETA SMS — "your truck is 14 minutes away" is the single highest-value message in this industry.
• Insurer claim portals & direct billing — the accident card's claim-number flow becomes a real integration, not guidance copy.
• Square tap-to-pay on the tray — the meter's figure becomes the invoice at the roadside, paid before the straps come off.
• Xero — every job syncs as an invoice; account customers (workshops, dealers) get monthly statements.
• Podium review flow — an SMS after drop-off, feeding the real reviews that replace this page's demo copy.

Iteration log