Build guide · site 354 · Wave 39, Industry Demos XXVIII

How the Reefline Dive demo was built

A fictional dive shop and training centre on the Rockingham beachfront — try-dives, Open Water and Advanced courses, guided shore dives on the Shoalwater reefs, boat double-dives on the wrecks, gear hire, air and nitrox fills. The page has one job: a booking request with the trip or course, the divers and the extras already priced.

Concept

The audience is the couple who want to learn before their Ningaloo trip, the visiting diver with a card and no gear, the group of mates booking a boat day, and the parent booking a teenager's try-dive. Dive pricing is per person, mostly all-inclusive, and lives or dies on what's in the price — so the page declares "tanks, weights and your guide or instructor included" on the card, on the slate and in the ledger, and prices the only three things that genuinely move: the trip, the head-count and the extras.

The direction is ten metres down on the Shoalwater reef, looking up: deep-water ground, sunlit-foam ink, aqua CTAs, hose-orange linework. The signature is the Dive Planner — a drawn SVG cross-section of the water column with a bright surface at the top, sun shafts breathing down through it, a depth gauge down the left from 0 to 30 m, a reef ledge, and the divers descending along a drawn line toward it. Trip chips redraw the surface (a boat, a beach, a pool edge), the depth line and the ledge; the divers stepper draws the figures; the toggles draw their marks (a hire-kit rack, green-and-yellow nitrox bands on every tank, a camera housing on the guide); and the price is a dive slate hung on the gauge rule with an orange cord.

Palette — measured, not assumed

Every ratio below was computed by WCAG relative-luminance arithmetic from the shipped hex tokens in Pass 1 (the spec's figures were hypotheses). All four spec tokens cleared their grounds by a wide margin, so no two-token remedy was needed: aqua #4FC8BE measures 7.65:1 on the water and 6.74:1 on the lifted card, and carries dark labels on buttons at 7.65:1; hose orange #F2A65A is 7.68:1 / 6.77:1 and is used for lines and marks; the pre-minted lighter inks (#8FE0D8 10.23:1, #F7C289 9.65:1) carry aqua- and orange-coloured copy anyway, for headroom over gradients. The slate is the one light surface: deep ink 11.81:1, subtitle 8.55:1, note 6.05:1, name line 6.16:1 on the slate cream.

Type

Techniques

• Procedural SVG water column, built in JS. Two layouts (900×560 wide, 600×640 tall under 600px) share one draw routine. A static frame — sky, water gradient, a radial sun bloom, four (three on tall) sun-shaft polygons, the gauge rule with 5 m ticks and 10 m labels left of the rule, the surface foam path, five drifting fish — is built once per layout; a trip group and a surface group are rebuilt on every state change.
• The ledge is one parametric path. ledgePath(L, topY, side) draws a plateau to an edge and a bank whose run scales with the drop, mirrored across the frame for the shore-side trips: the boat and Advanced trips put the ledge under the water column at left (divers descend down-left from the boat); try-dive, Open Water and shore dives put it at right (divers descend down-right from the pool ladder or the beach). Corals on the boat/deep ledges, seagrass tufts on the shore ones, a skills mat on the Open Water sand.
• Divers are one function. diverFigure() draws tank, fins, body, head, mask and hose in a rotated group aligned to the descent line, spaced from 16% to 78% along it and offset alternately across it, with the guide (orange hood, 1.5× scale, camera housing when photos is on, a hand-line to the student on try-dives) at 90%. Drawn cap 8 = the stepper cap = the boat's survey; the count tag prints the same integer.
• Bubbles and breath. A pool of 44 circles is recycled by an rAF loop with dt = min(max(now − last, 0)/1000, .05): emitters sit at every diver's mouth, bubbles rise, wobble, grow and fade into the last 30 px below the surface; the sun shafts breathe between 0.55 and 0.95 opacity (the never-invisible floor); the foam line ripples; the fish drift. Reduced motion renders one settled frame with four static bubbles per emitter; the loop pauses on document.hidden.
• The slate is HTML. Positioned on the stage at calc(6% + 24px) from the left so its cord meets the gauge rule exactly, with a drilled hole and a horizontal orange cord as pseudo-elements. Three width variants: wide (25% of the stage, extras itemised in the subtitle), mid 600–1099px (28%, subtitle shortened to the multiplier), mobile (48% cap, tight padding, smaller price, tier note swapped for its pinned short form).
• Marks are SVG groups toggled by rebuild (never the .hidden IDL), animated by a CSS mark-in on the group while positioning stays on attributes.
• Procedural Rockingham map: Garden Island, Cockburn Sound, the Point Peron causeway, Penguin, Seal and Bird Islands with a seagrass hatch, Warnbro Sound, three orange wreck/reef markers, ten suburb dots, the shop star and the ramp. No raster anywhere; the favicon is an inline SVG data-URI.
• No libraries — vanilla JS, one <style>, Google Fonts the only external request.

Signature implementation

State is one object — trip, divers, three toggle memories — and compute() is a pure function over it: the boat rate is $170 at four or more divers else $190, other trips are flat per person; gear (+$75 pp) is live on shore and boat only, nitrox (+$20 pp) on boat only, photos (+$60 flat) on shore and boat; per-person lines multiply the actual count; the tier note fires only at boat × 3. render() writes the result to every surface in one pass — the display line, the slate (name, price, subtitle, note), the chips, the stepper, the three switches (disabled with the on-card reason where not live, aria-checked mirroring the effective state), the itemised ledger, the plain-text mirror under the scene and the booking textarea — then drawTrip() rebuilds the scene. Restore-vs-reset is by memory: a course chip never overwrites state.gear/nitrox/photos, so returning to a boat day restores the prior choices exactly. Every handler bumps the scene token before touching state; the first draw earns a 90 ms/layer stagger (1.2 s cap), every later draw 26 ms/layer (480 ms cap); the settle timer publishes window.__diveshop.settled only for the latest token, so a rapid-fire run of clicks ends on one definite, settled state.

Pricing model (pinned anchors)

Divers 1–8 on every trip (no empty state; the boat carries eight so the drawn cap equals the range). Every anchor and multiplier is an integer, so totals are whole dollars by construction. The estimator's cheapest outputs equal the services grid floors: shore dives from $95, try-dives $199, boat double-dives $170 pp (groups of four) / $190 pp, Open Water $650, Advanced $550.

Worked examples — measured from the running page against an independent oracle

Conversion decisions

• Above the fold at 375px: name, "Learn to dive, shore dives and boat days out of Rockingham — under by nine", Book a dive + Call buttons, then the three trust chips (since 2008 · AMSA-surveyed 8-diver boat · gear serviced every 100 dives) — all before the display line and the water column, which start the scroll.
• Click-to-call in the masthead (number hidden below 420px, icon kept) and a fixed sticky bar under 760px with an orange Call and an aqua Book — the two-colour split so the thumb finds the phone without reading.
• The slate is the price, and it sits inside the artwork because the 1200×750 thumbnail is the commercial argument; the ledger below repeats it itemised for the reader who wants the maths, and the plain-text mirror carries the same lines for a screen reader.
• Form fields: name, mobile, suburb or hotel (visiting divers are in hotels), a certification select (none yet / Open Water / Advanced or higher — it decides whether we're booking a course or a dive), a preferred date or weekend as free text (people book "any weekend in October", not a date picker), and the planner's plan carried into the textarea. Validation is local, focus lands on the first bad field, and the confirmation panel is hidden until a valid filled submit.
• Reasons, never dead controls: a switch that can't apply to the chosen trip is disabled with a one-line reason in its own words, and remembers its setting for when the trip changes back.
• Go/no-go honesty: the swell call, the refund and the DAN line are on the page because they're the questions that decide the booking.

Local SEO we'd implement for the real business

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SportsActivityLocation",
  "name": "Reefline Dive",
  "description": "Dive shop and training centre in Rockingham: try-dives, Open Water and Advanced courses, guided shore dives on the Shoalwater reefs, boat double-dives on the wrecks, gear hire, air and nitrox fills.",
  "url": "https://www.example-reefline.com.au/",
  "telephone": "+61 8 9000 0354",
  "image": "https://www.example-reefline.com.au/photos/boat.jpg",
  "priceRange": "$95–$650",
  "address": { "@type": "PostalAddress", "streetAddress": "(real street address)", "addressLocality": "Rockingham", "addressRegion": "WA", "postalCode": "6168", "addressCountry": "AU" },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.28, "longitude": 115.73 },
  "areaServed": ["Rockingham", "Shoalwater", "Safety Bay", "Warnbro", "Baldivis", "Kwinana", "Perth"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Wednesday","Thursday","Friday"], "opens": "08:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Saturday","Sunday"], "opens": "06:30", "closes": "16:00" }
  ],
  "hasOfferCatalog": { "@type": "OfferCatalog", "name": "Courses and trips", "itemListElement": [
    { "@type": "Offer", "name": "Guided shore dive", "price": "95", "priceCurrency": "AUD" },
    { "@type": "Offer", "name": "Boat double-dive", "price": "190", "priceCurrency": "AUD" },
    { "@type": "Offer", "name": "Open Water course", "price": "650", "priceCurrency": "AUD" }
  ] },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "184" },
  "review": [ { "@type": "Review", "author": { "@type": "Person", "name": "(real reviewer)" }, "reviewRating": { "@type": "Rating", "ratingValue": "5" }, "reviewBody": "(real review text, synced from Google)" } ]
}
</script>

What would change for the real client

• Bookings: the planner's plan would post into Rezdy or FareHarbor (both handle per-person pricing, group tiers and add-ons like gear and nitrox natively) with live availability per boat day, instead of a demo confirmation panel.
• Courses: the Open Water and Advanced chips would link straight to the dive agency's e-learning enrolment so theory starts the night the booking lands; the medical statement would be a real PDF or e-form.
• Go/no-go: a Willy Weather or BOM swell and wind feed on the "where we dive" panel, and the 7pm text sent from the booking system, not by hand.
• Money: deposits and balances into Xero; gift vouchers for the "learn before Ningaloo" couple.
• Their photos, their reviews: the drawn scenes stay as the brand's illustration language, but real photography of the boat, the wrecks and the sea lions goes into the services grid; the review cards read from the Google profile feed.
• Structured data as in the panel above, with the real ABN, address and hours.

Iteration log

Reefline Dive is a fictional business — a dive shop industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Back to the site · Index.