How the Wattleline Charters demo was made

The concept

Wattleline Charters moves groups — 13, 24 or 48 seats, driver included, from a Welshpool depot across the Perth metro and a Swan Valley day-trip ring. The page has one job: a charter enquiry with the bus size, hours and price already quoted. The art direction is the depot at 6am — morning-grey ground, the coach long and confident in livery green, headlight beams as the only warm light. Punctual, unhurried; the page should feel like the bus that’s already there when you walk out.

Palette

The ink/line split holds throughout: wattle gold draws beams, stars, rings and plate borders but never sets small copy; on the night surfaces (plates, destination boards, footer) the brighter #E9B84C carries display-size figures only.

Type

Anton (one weight, 400) is the destination-board face — block caps for the h1, section heads and the route plate, set like the roller signs on the front of a bus. The display moment is “EVERYONE ON THE SAME BUS” as a black roller strip with gold caps, straight off the destination board. Public Sans does everything else: a plain, legible workhorse that reads like signage regulation text, body ≥16px on mobile, tabular numerals in the steppers and ledger.

The Charter Planner (signature)

An SVG bus side profile drawn procedurally — body, windscreen, door, mirror, wheel arches, gold skirt stripe — that swaps length with the bus chips: the 13-seat minibus, 24-seat mini coach and 48-seat coach each rebuild the profile with more window bays. Every seat is a window cell, and windows light one per passenger, filled front-to-rear; a glow sweep travels the lit rows on a rAF loop with a never-invisible floor — settled opacity never drops below 0.55, so the 7-second thumbnail always catches a lit bus. The quoted price sits on the bus as a route-number plate (gold-bordered, Anton figures), inside the first 750px at 1200 wide.

Engineering notes: the entrance staggers 45 ms per window on first draw and 8 ms on every later state change (dual-speed redraw); handlers bump an invalidation token before the state swap; the rAF delta is clamped at zero and capped; the settled probe flag flips only when every lit window’s entrance fade has actually completed — it’s derived from the rendered state, not a timer. Reduced motion renders all lit windows at a static 0.82 and settles immediately. The scene is pure SVG — no canvas, no libraries.

Pricing model (all anchors binding)

• 3-hour minimum, stated in hours and billed at the selected bus’s rate: 2 hours on the 13-seat bills 3 × $120 = $360 with a note; 3 hours exactly shows no note (the boundary is reachable from the stepper and asserted).
• Forced step-up: a passenger count above the selected bus’s seats quotes the smallest bus that fits, with the pinned note template — “30 won’t fit the 24 — quoted for the 48 seater” ($760 at 4 hours). A bigger bus than needed is always allowed, no note.
• Transfer mode disables the hours stepper with its reason on the card (“transfers are flat — the meter’s off”) and states the deliberate flatness: the 4am flight costs what the 4pm one does.
• Price-less by design: school-run/NDIS contracts and multi-day tours print no number — quoted to the route or the itinerary, with the reason on the card.
• Rest state: hourly, 24-seat, 18 passengers, 4 hours — $600 measured from the running page and cross-checked against an independently reimplemented oracle, along with $950, $360 (both sides of the boundary), $760, $320 and $420. The grid floors ($260 transfer, $360 hourly) equal each mode’s cheapest billed output.

Conversion decisions

• Planner in the hero. Charter pricing is the whole anxiety — “what does a bus even cost?” Answering it above the fold, on the vehicle itself, is the hook. The planner’s scenario pre-fills the enquiry form (passengers, trip type, summary line), so the demo interaction becomes a warmer lead.
• Two floors stated per card. Transfers from $260 and hourly from $360 are different products; one blended “from” figure would be dishonest in both directions, so each service card carries its own floor and its own minimum.
• Click-to-call in the header, sticky call/quote bar at 375px — group transport is booked from a phone, usually by one designated organiser standing in a car park.
• Form fields: name, phone, pick-up suburb, date, passengers, trip-type pills, and a “where to and back?” textarea — the exact facts a charter dispatcher needs to quote. Front-end validation with per-field errors; the confirmation panel is hidden on load and on empty submit, shown only after a valid one, and plainly says no enquiry was sent.
• Honest FAQ: waiting time is charter time, sealed eskies yes / open drinks no, under-4s need their own seat, and why contracts print no price.

Local SEO we’d implement for the real business

The demo page itself carries only WebPage/CreativeWork schema naming it a demonstration — fictional structured data in a real index is dishonest markup. For a real operator we’d ship:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "additionalType": "https://www.wikidata.org/wiki/Q1316657",
  "name": "Wattleline Charters",
  "description": "Bus and coach charter with driver across Perth —
    13 to 48 seats from the Welshpool depot.",
  "telephone": "+61 8 9000 0320",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Welshpool",
    "addressRegion": "WA",
    "postalCode": "6106",
    "addressCountry": "AU"
  },
  "areaServed": ["Perth", "Swan Valley", "Mandurah"],
  "openingHours": "Mo-Fr 07:00-17:00",
  "priceRange": "$260 - $1,900",
  "review": {
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "…real customer…" },
    "reviewBody": "…from the operator's verified reviews feed…"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "…measured…"
  }
}
</script>

schema.org has no charter-bus subtype, so the top-level type stays LocalBusiness and a real build would add additionalType pointing at a bus-charter concept (shown above), plus service-page schema per offering. Review and rating values would come from the operator’s real, verifiable feed — never authored.

What would change for the real client

Their fleet photography replacing the procedural scene (or sitting beside it — the planner keeps earning its place), their reviews feed (Google Business Profile API), online booking and dispatch through their charter system — CoachManager, Busmin or a Tradify-style job flow for the smaller operators — GPS/duty integration (Geotab, Logmaster for fatigue compliance on longer runs), and Xero for invoicing. The quote form would post to their dispatch inbox or booking API with the planner scenario attached as structured data.

Iteration log