Making Second Swell

Second Swell Surf School is a fictional learn-to-surf operator at Trigg and Scarborough, built as a surf-school industry demonstration. The page has one job: a lesson booking with the format, pack and party size already priced — for the parent booking a grom’s first lesson, the adult who keeps watching other people surf, and the mates buying a lesson pack instead of another hoodie.

The Session Board

The signature is a drawn SVG cross-section of the Trigg bank at first light: procedural waves rolling over the sand bank, surfer silhouettes riding the face, and the coaching flag planted on the beach carrying the live price. Every control redraws the scene honestly:

• Format chips change the drawn line-up — group draws up to four surfers on the bank, semi-private exactly two, private one surfer with the coach paddling alongside.
• The surfers stepper (1–4) is live on group only. Semi-private locks it at two (“you bring your partner in crime”) and private locks it at one (“one coach, one surfer — that’s the point”) — forced states with the reason on the page, never a silently dead control.
• Pack chips draw tally notches on the flag pole — the 5-pack closes the tally with a diagonal gate stroke, a second-read detail for the second visit.
• Session photos draws a photographer with a long lens on the sand and re-prices per the pack’s session count — change the pack and the photo line honestly re-prices with it.
• At four surfers a note (never a clamp) says: bringing more than four? call us — we’ll book you the whole bank.

The board pre-fills the booking form with the configured session, so the demo interaction becomes a warmer enquiry — the classic calculator→form handoff.

Honest pricing model

All prices are per surfer for the pack; the total is the per-surfer pack price times the party size, plus photos at $45 per session times the pack’s session count. School programs and corporate days deliberately print no number — headcount pricing is quoted per program, and saying so plainly beats inventing a figure.

Worked figures verified against an independently reimplemented oracle in the QA harness: rest state group × 2 on the 5-pack = $650; the grid floor group single = $75; semi 3-pack = $600; private 5-pack = $650; rest + photos = $875 with the photo line reading “$225 — 5 sessions”; and the pack-change intersection (group × 2, 3-pack, photos on) = $555 with the photo line re-priced to “$135 — 3 sessions”. All totals display to the whole dollar; every anchor and multiplier is integer-safe.

Palette — argued from the sand, the deep water and the sunrise

Contrast ratios below are measured WCAG figures from the shipped tokens, not estimates.

The spec pre-minted the coral two-token pair (button fill + text-ink) because raw coral was hypothesised to land between 4:1 and 5:1 — measurement confirmed it (4.55:1 with white, 4.02:1 on sand), so white-label buttons use #A8401F and coral-coloured small copy uses #93381B. Sea glass measured 2.56:1 and stays strictly a line-and-mark colour, with #38635A as its text ink.

Type

Bricolage Grotesque (700–800) carries the display voice — a salt-crusted grotesque with a wetsuit’s squeak of character, set huge for “STAND UP BY THE THIRD WAVE” over the drawn break. Figtree does the workhorse duty: friendly, legible at 16.5px body size, and happy in a price ledger.

Techniques

Every visual is procedural — no raster images anywhere. The scene is a single SVG whose water surface is rebuilt each animation frame: a skewed gaussian crest (steeper on the shoreward side, so the wave reads as breaking over the bank) summed with two travelling sines, damped to nothing as the water shallows at the shoreline. Surfer silhouettes sample the same surface function at their x-position each frame, so they rise, fall and tilt with the face they’re drawn on. The rAF delta is clamped at zero and capped (dt = min(max(now−last,0)/1000, .05)), the loop pauses when the tab hides, and reduced-motion visitors get a settled mid-roll frame with no loop at all. Wave stroke opacities oscillate but never drop below 0.55, so the signature is visibly alive at any capture instant.

State changes use a dual-speed redraw: the first render earns the full staggered entrance, then every chip tap redraws snappy (~520 ms cap) via a first-draw flag. Each control handler bumps a build token before swapping state, so an in-flight rebuild can never act on stale scene data — rapid-fire chip sequences were driven in QA to prove it. The flag’s price badge lives inside the artwork (the thumbnail is the commercial argument) and swaps to a tight, subtitle-free variant below 480px of scene width so it never covers the drawn wave on a phone.

Conversion decisions

• The Session Board shares the hero. The priced scene — badge included — sits inside the first 750px at 1200 wide, so the thumbnail and the first desktop screen both show a priced session, not just a promise.
• Above the fold at 375px: name, the trade-and-area value line, the book CTA and a trust signal, no scrolling. The sticky call/book bar keeps both actions under a thumb on mobile.
• Form fields match the trade: name, phone, suburb, ages of surfers (board sizing and grom rules hang off age), and a session textarea pre-filled from the board. Fewer fields, warmer lead.
• Confirmation is honestly local: the designed panel appears only after a valid submit, promises a same-day callback, and says plainly that no real booking was made.
• Honest controls everywhere: locked steppers explain themselves, the four-surfer ceiling is a call-us note rather than a silent clamp, and programs print a designed price-less line instead of a made-up number.

Local SEO we’d implement for the real business

The demo page deliberately ships only WebPage/CreativeWork-family structured data — fictional business schema in a real index would be dishonest markup. For a real surf school we’d ship SportsActivityLocation — the organization subtype that actually matches a surf school (more precise than bare LocalBusiness, and the type Google’s own docs use for sports venues and activity providers) — plus a genuine review feed:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SportsActivityLocation",
  "name": "Second Swell Surf School",
  "description": "Learn-to-surf lessons at Trigg and Scarborough —
    group, semi-private and private coaching, boards and
    wetsuits included.",
  "url": "https://secondswell.com.au",
  "telephone": "+61 8 9000 0332",
  "priceRange": "$75–$650",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Trigg",
    "addressRegion": "WA",
    "postalCode": "6029",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.867, "longitude": 115.753 },
  "areaServed": ["Trigg", "Scarborough", "North Beach", "Karrinyup", "Doubleview"],
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
    "opens": "06:00", "closes": "13:00"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "187"
  },
  "review": {
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "A real customer" },
    "reviewBody": "Real review text, streamed from the Google
      Business Profile — never invented."
  }
}
</script>

Alongside the schema: a Google Business Profile tuned for “surf lessons Trigg / Scarborough / Perth northern beaches”, suburb-level landing content for the beaches actually taught, and FAQ markup for the questions the car park actually asks.

What changes for the real client

• Live bookings: the Session Board’s configuration maps directly onto Rezdy or FareHarbor session inventory — real-time availability, deposits and the 6:30am rebooking flow, instead of a demo form.
• Accounts: Xero invoicing for school programs and corporate days, with pack revenue reconciled from the booking platform.
• Conditions: the 6am surf-check promise backed by a live Seabreeze/coastcam link, and SMS rebooking through the booking platform when the bank’s no good.
• Their proof: real session photography in place of the drawn scene’s supporting sections, and reviews streamed from the Google Business Profile rather than written as demo copy.

Iteration log

Colophon

Second Swell Surf School is a fictional business — a surf school industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Phone numbers use the reserved (08) 9000 0xxx pattern; ABN and Working With Children numbers are visibly placeholder-patterned.