How the Stillwater demo was made

The concept

The wave's calm dark site: an evening treatment room, not a day spa brochure. Deep green-charcoal ground, eucalyptus-oil linework, warm amber marks like low lamplight — and clinical honesty underneath the calm. Every price on the page is computed live; the one number we refuse to print (your health-fund rebate) is refused deliberately, on the page, in words.

Palette — the treatment room at evening

The ink/line split is deliberate: amber carries marks and surfaces (buttons get dark text on amber at ~7:1), eucalyptus carries structure, and all running text is linen or muted linen (#B9B3A4, 7.1:1) — the mid-tone accents never set small type.

Type

Fraunces (600, high optical size) for display — soft warmth with a clinical spine, exactly the register of a good remedial clinic: kind, but it will find the spot. The display moment is the headline itself: "Where the tension actually is — your lower back", where the italic amber focus-area name swaps live as the planner's chips change. Inter carries body, forms and the ledger — legible at 16.5px on a dark ground, tabular numerals for prices.

Signature — the Treatment Planner

An SVG back-view figure built at runtime from mirrored point data: every outline and muscle-fibre path is defined once for the left side as quadratic curves and reflected across the spine, so the figure is symmetric by construction. Focus-area chips light the selected region's muscle groups with stroke-flow lines — amber dashes (52% of each path's measured length) travelling the fibre direction via stroke-dashoffset in a single rAF loop. The frame delta is clamped at zero and capped (dt = min(max(now−last,0)/1000, .05)), each fibre pulses on its own phase with an opacity floor of 0.62 — never invisible at any capture instant — and the loop pauses when the tab hides.

State changes are race-safe by construction: chip handlers bump an animation token and rebuild the fibre set synchronously before the next frame, so no in-flight animation ever closes over a stale region's paths — verified with rapid-fire multi-click drives. The first render earns a staggered entrance (~1.5s birth window); every subsequent chip swap redraws snappy (0.35s cap). Duration, add-on and concession chips reprice the ledger instantly; focus and duration pre-fill the booking form; and the whole scenario is exposed on window.__massage with a settled flag for testing. Reduced motion renders the fibres as static visible strokes and skips the loop entirely. For accessibility the figure is mirrored as a plain-text focus-area list beside the planner, every control is a real button (keyboard-driven in testing, Enter and Space), and the ledger total is an aria-live region.

Honest pricing

Every figure is anchor arithmetic, measured from the running page and cross-checked against an independently reimplemented oracle in the test harness.

• Measured rest state: lower back · 60 min · no add-ons → $120, with the HICAPS declaration on the ledger.
• Worked examples (all measured = spec): 90 min + dry needling + cupping = $215 · concession 60 min = $105 · concession 90 min = $155 · cheapest output 30 min = $70, which equals the services grid's "from $70" floor.
• The disabled control: concession has no honest meaning on 30/45-minute sessions, so on those durations the toggle is disabled with its reason printed beside it — and an active concession is stripped from the price the moment you step down to 45, never silently kept.
• The number we won't print: rebates are set by each fund and each policy, so any figure would be the dishonest choice. The declaration — "your fund sets your rebate — we process HICAPS on the spot, you pay the gap" — appears on the ledger, in the form's plan echo, and in the confirmation panel: wherever a session total prints, the declaration travels with it.
• Scope, stated on-card: the planner prices clinic sessions only; the $180 mobile visit lives in the services grid and says what it includes.

Conversion decisions

• Above the fold at 375px: value proposition naming trade and suburb, book CTA, click-to-call, and three trust signals — before any scrolling. On desktop the fold is composed so the planner's figure, its amber stroke-flow and the $120 ledger all enter the first 750px.
• Planner → form handoff: the enquiry arrives warm. Focus and duration flow into the form's plan echo with the live total, and the form's own focus chips drive the planner back — one shared state, no contradictions.
• Sticky mobile bar: call + book, 48px targets, because a person with a locked neck is booking one-handed from a phone.
• Form fields: name, phone, suburb, focus area, preferred day & time, returning-client toggle — enough for the clinic to call back with two proposed times, nothing that adds friction. The confirmation is a designed local panel (hidden until a valid submit); nothing pretends to be a network round-trip.
• Honesty as conversion: the FAQ says plainly what remedial massage is not, when to see a GP first, and why we won't quote a rebate — the same register that makes the prices believable.

Local SEO we'd implement for the real business

This demo page ships only demonstration schema (WebPage/CreativeWork) — fictional structured data in a real index would be dishonest markup. For a real clinic we'd ship the block below. Schema.org has no massage-therapy business type, so the correct top-level type is MedicalBusiness — the closest actual organization subtype. (Tokens like Physiotherapy look plausible but are MedicalSpecialty enumeration values, not business types — using one as the organization @type is a classification error that costs you the rich result.)

{
  "@context": "https://schema.org",
  "@type": "MedicalBusiness",
  "name": "Stillwater Remedial Massage",
  "description": "Remedial and sports massage clinic in Mount Lawley,
    Perth. HICAPS health-fund rebates processed on the spot.",
  "url": "https://stillwaterremedial.com.au",
  "telephone": "+61 8 9000 0309",
  "priceRange": "$70–$215",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Beaufort Street",
    "addressLocality": "Mount Lawley",
    "addressRegion": "WA",
    "postalCode": "6050",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.934, "longitude": 115.871 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Friday"], "opens": "08:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Tuesday","Wednesday","Thursday"], "opens": "08:00", "closes": "20:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "13:00" }
  ],
  "areaServed": ["Mount Lawley","Highgate","North Perth","Menora","Inglewood",
    "Maylands","Bedford","Bayswater","Dianella","Yokine","Coolbinia","Perth"],
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "87" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "P. Sharma" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Three sessions and I can shoulder-check again."
  }]
}

Beyond schema: a Google Business Profile with service-level categories, suburb-scoped service pages, review acquisition wired to the booking flow, and FAQ markup on the questions the clinic actually gets asked.

What changes for the real clinic

The demo's form becomes a live diary. We'd integrate Cliniko or Nookal (the practice-management systems most WA remedial clinics already run) so the planner's focus + duration selection lands directly in the booking diary with the right appointment type and length; SMS reminders and intake forms come with them. The HICAPS terminal stays the source of truth for rebates — the site's job is the honest declaration, the terminal's job is the number. Add Google Reviews feeding the testimonial strip, and the clinic's real photography replacing exactly nothing structural: the procedural figure stays, because it's the thing clients remember.

Iteration log