Generative Assets · Industry Demos XXVII · site 350

How Southbound Charters was made

A fictional Hillarys fishing charter operator, built as a single conversion-focused landing page whose one job is a booking request with the trip, the seats or the whole boat, and the extras already priced. The wave's dark site — the pen at 5am, deck lights on, the horizon starting to glow.

Concept

Southbound Charters runs reef and deep-drop charters out of Hillarys Boat Harbour on a 12-metre cat: shared seats and private charters across half, full and extended days, bait, ice and the licence covered. The audience is the mate organising a bucks' day, the visiting family who wants to catch a dhufish, the FIFO crew on swing and the corporate team lead. The page has a single job — a booking request with the deck plan already set — and everything on it (the Deck Plan, the ledger, the pre-filled form, the weather-call promise) exists to shorten the distance to that request.

Southbound Charters is a fictional business — a fishing charter industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Phone numbers use the reserved (08) 9000 0xxx pattern, the ABN and the CFL charter licence are placeholders, and the reviews are demo copy on a page that says so.

Palette

Argued from the pre-dawn sea, foam on the hulls, the first orange light over the harbour wall and the teal braid on the reels. Contrast ratios below are measured from the shipped tokens (WCAG arithmetic run in the headless pass), not spec-time hypotheses.

The whiteboard is its own little light-ground palette inside the dark page: marker ink #1B2A3B on #EEF3F5 measures 13.03, the subtitle grey #3C4C5C 7.89, the eyebrow #4A5B6C 6.25, and the note is written in a marker red-orange #A64F1E at exactly 5.00 — the base orange on white would have been 2.23, so the whiteboard note got its own darker ink (the two-token rule running the normal way on a light surface, inside a dark site).

Type

Four seats, full day, lines in by seven

Oswald 600 for display — the condensed, upright letter of a boat name on a transom and a boat-harbour sign; set in caps with a hair of tracking it reads like the wheelhouse whiteboard itself. Mulish for everything you have to read: a wide, friendly humanist sans that stays legible at 15px on a dark ground and doesn't fight the display face. The display moment is the seat count set huge above the controls, rewritten by every chip and stepper tap.

The Deck Plan — signature

A drawn SVG catamaran side-on at the pen: the wharf and its PEN 14 sign to the left, the harbour wall and its beacon to the right, a gradient sky over a teal-lined sea, and the boat itself — two hulls (the far one drawn behind for the cat read), a wheelhouse under a hardtop, a flybridge rail, a mast aft with the pennant. Every control redraws something:

• Anglers stepper — up to ten drawn figures along the near rail with teal rods and a thin line to the water; your party in dawn orange, other guests in foam grey. Drawn cap is 10 = the boat's survey, so the count is always drawn honestly, and the bow tag prints it too ("4 OF 8 SEATS" / "6 ABOARD · PRIVATE").
• Trip chips redraw the horizon while the boat stays at the pen: full day (deep drop, the earliest departure) keeps the sun under the wall with the glow breathing and the stars up, electric-reel boxes on every rod and a dhufish on the aft deck; half day (reef) brings the sun just over the harbour wall with three drawn reef markers bobbing on the horizon; extended day sets a low, red-orange western sun and stacks three eskies on the wharf.
• Booking chips — shared fills the rail to eight with foam-grey guests and flies a small teal burgee; private draws only your party and hoists the orange PRIVATE pennant.
• Toggles — rod & tackle hire draws a rod rack on the forward hardtop; filleting draws a fillet table on the stern platform; pick-up parks a minibus on the wharf.
• The price is the whiteboard hung on the flybridge rail — an HTML overlay sized in container-query units so it scales with the scene: price, "Full day · shared · 4 seats · tackle", and a second marker line ("Shared carries eight — nine up, go private") that appears only at the shared cap.

Motion: one requestAnimationFrame loop rocks the boat (±1.1° and ±1.6px) and breathes the dawn glow between opacity 0.62 and 1.0 — a never-invisible floor rather than phase arithmetic — with dt = min(max(now − last, 0)/1000, 0.05) and a stop on visibilitychange. Swell lines drift, pennants flap and the beacon pulses in CSS. Under prefers-reduced-motion the loop never starts and the boat rests at a fixed 0.4° with the glow at 0.9. Redraws are dual-speed: the first draw staggers the anglers in at 70 ms per figure, every later change at 26 ms, and each handler bumps the render token before touching state so a rapid-fire sequence of taps can never resolve a stale settle.

Why the scene stays pre-dawn

The spec pinned two things that pull against each other: "full day — high sun" for the trip chip, and a rest-state thumbnail of "the cat at the pen … the dawn glow breathing" on the wave's dark site. The rest state IS the thumbnail and the site's whole direction is the pen at 5am, so the scene stays at the pen for every trip and the chips change the horizon's character instead: the deep-drop crew leaves first (sun still under the wall), the reef crew leaves with the sun just up, and the extended-day sky is the low western sun of the run home. Documented here as a deliberate resolution, not an omission.

Pricing model — pinned anchors, measured outputs

GST inclusive. Every figure on the page is computed from these anchors and cross-checked in the QA harness against an independently reimplemented oracle. Measured rest state: $1,140 (full day, shared, 4 anglers, tackle ON = 4 × $260 + 4 × $25).

Iteration log

Conversion decisions

• Above the fold at 375: the name, "Reef & deep-drop fishing charters out of Hillarys — lines in by seven", a Book seats CTA, a call button and three trust signals (AMSA survey, the skipper's seasons, the 6pm weather call) all sit inside the first 740px.
• The weather call is a trust signal, not fine print. It's the question every first-time charter customer has, so it's in the trust line, the ledger, the FAQ and the confirmation copy.
• The form takes a preferred date as free text ("any Saturday in October") because charter customers book around swings and weekends, and a rigid date input turns a warm lead into a form error. Suburb-or-hotel because the pick-up minibus needs one or the other.
• Deck plan → form handoff: the textarea is pre-filled from the signature ("Booking request: full day (deep drop, 8 hrs), shared seats, 4 anglers, tackle — $1,140 GST inc.") until the visitor edits it.
• Sticky call/book bar below 960px; the header keeps a tel: link at every width. Nothing is charged online: "every booking is a request" is on the ledger, the statement and the promise card, so the demo never pretends to take payment.

Local SEO we'd implement for the real business

The live page carries only WebPage / CreativeWork / BreadcrumbList schema naming it a demonstration — fictional business data must not enter a real index. For the real operator we would ship the block below. schema.org has no charter-specific subtype (no "FishingCharter" or "BoatTourOperator" exists in the vocabulary), so the honest top-level type is LocalBusiness with the trips expressed as Offers in a catalogue; reviews would come from a live feed (Google Business Profile via a reviews widget), never hand-typed.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://www.example-charter.com.au/#business",
  "name": "Southbound Charters",
  "description": "Reef and deep-drop fishing charters out of Hillarys Boat Harbour on a 12 m catamaran — shared seats and private charters, half, full and extended days.",
  "url": "https://www.example-charter.com.au/",
  "telephone": "+61 8 9xxx xxxx",
  "image": "https://www.example-charter.com.au/img/southbound-at-the-pen.jpg",
  "priceRange": "$180–$3,000",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Pen 14, Hillarys Boat Harbour, Southside Drive",
    "addressLocality": "Hillarys",
    "addressRegion": "WA",
    "postalCode": "6025",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.8249, "longitude": 115.7382 },
  "areaServed": ["Hillarys", "Perth", "Scarborough", "Joondalup", "Two Rocks"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"], "opens": "06:00", "closes": "19:00" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Charters",
    "itemListElement": [
      { "@type": "Offer", "name": "Half-day reef seat", "price": "180", "priceCurrency": "AUD" },
      { "@type": "Offer", "name": "Full-day deep-drop seat", "price": "260", "priceCurrency": "AUD" },
      { "@type": "Offer", "name": "Extended-day seat", "price": "340", "priceCurrency": "AUD" },
      { "@type": "Offer", "name": "Private charter (whole boat, up to 10)", "price": "1600", "priceCurrency": "AUD" }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "212" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "Real customer name from the reviews feed" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Pulled from Google Business Profile — never hand-written."
    }
  ],
  "sameAs": ["https://www.facebook.com/…", "https://www.instagram.com/…"]
}
</script>

Alongside the schema: a Google Business Profile with the pen as the pin, service-area pages for the pick-up suburbs, a "what's biting" post cadence tied to the season (dhufish closure dates are real content people search), and FAQ schema on the licence and weather-call questions.

What would change for the real client

Bookings

Rezdy or FareHarbor for live seat inventory, deposits and the OTA channels (Viator, GetYourGuide) — the Deck Plan would query availability per date and hand off to the checkout with the trip, seats and extras pre-selected.

Accounts

Xero — deposits, invoices for private charters, the fuel and bait lines.

Weather call

A BOM or Willy Weather feed on the booking page (swell, wind at Rottnest) with the 6pm decision pushed by SMS to every booked angler — the promise the site makes, automated.

Photos & reviews

Real deck photos in place of the drawn cat, a live Google reviews widget in place of the three demo cards.

Licence & safety

The real CFL number, AMSA survey certificate number and the Fisheries charter licence conditions in the footer; the bag-limit FAQ linked to the current DPIRD recreational fishing rules.

Techniques

• Single-file HTML, all CSS/JS inline; only Google Fonts loaded externally. No raster images anywhere — the scene, the map and the icons are inline SVG; the sky, sea and glow are SVG gradients.
• SVG scene with a whiteboard as an HTML overlay in cqw units (container-type:inline-size on the scene), with a tight variant under 560px and a mid-width variant between 561 and 1100px.
• rAF loop with clamped delta and visibility pause; CSS keyframes for the swell lines, flags and lamps; prefers-reduced-motion honoured in CSS and via matchMedia. No canvas, so no DPR cap is needed; the SVG rescales on resize by construction.
• State probe window.__fishingcharters exposes the scenario, computed figures, the display line, board text and a settled flag; QA gates on state, never on seconds.
• Procedural SVG coastal map: depth contours, the trench dashed in orange, the three-mile reef and the towns from Two Rocks to Fremantle, Hillarys starred.