Build guide · site 345 · Wave 37, Industry Demos XXVI

How the Kindling Psychology demo was built

A fictional Subiaco psychology practice — registered and clinical psychologists, in the room and by telehealth, individuals and couples, Medicare Better Access, NDIS and extras claiming. The page has one job: an initial-appointment request with the practitioner, format and session plan already priced.

Concept

The audience is an adult with a GP mental health treatment plan and no idea who to call, a parent booking for a teen, a couple having the same argument again, an NDIS participant's support coordinator, and the person who has been meaning to for a year. Mental-health copy stays calm, plain and unpatronising; the page names Lifeline 13 11 14 and 000 once, honestly ("we're not a crisis service") — real safety numbers stay real on a fictional page.

The direction is a consulting room with the morning in it: morning-sage ground, deep-forest ink, eucalypt CTAs, paperbark linework. The signature is the Session Path — a drawn path of stepping stones through grass and two paperbark trunks toward a consulting-room door. One stone lights per booked session, stone one wears an intake tag when the extended first session is on, the door's nameplate is the price badge, and the funding chips change the badge's declaration line but never the figure.

Palette — measured, not assumed

Every ratio below was computed by WCAG relative-luminance arithmetic from the shipped hex tokens during Pass 1 (the spec's figures were hypotheses). Eucalypt #3E7C63 on the sage ground measured 4.34:1 — under the 4.5 floor for text — so the pre-minted two-token pair carries the argued hue: buttons use the deeper fill #2F6650 under white labels, and every eucalypt-coloured word uses the text-ink #285743. Paperbark #D9A066 is 2.02:1 on the ground and is used only for lines and marks; paperbark-coloured copy uses #7A5426.

Type

Techniques

• Procedural SVG scene, built in JS. Two layouts (900×520 wide, 600×640 tall under 600px) share one draw routine: sky/ground gradients, a seeded-PRNG grass field (150 tufts, deterministic seed 345), two paperbark trunks with peel strokes and eucalypt sickle leaves, a weatherboard wall, and a jarrah door with a nameplate mount. Trunks are split into a back group (behind the wall) and a front group (over the path) so the scene layers honestly.
• Stones on the path. Twelve stones are placed with getPointAtLength along a cubic path so both layouts space evenly; each is a <g class="stone"> whose lit class transitions fill via CSS with an inline transition-delay per stone. Dual-speed: first draw staggers 60 ms/stone (1.2 s cap), every later change 12 ms/stone (~520 ms cap) behind a firstDraw flag; a scene token bumped in every handler invalidates an in-flight settle so rapid-fire clicks can't race.
• Breathing ring. A rAF loop with the delta clamped at zero and capped at 50 ms drives an eight-second cycle: radius and opacity ease in over four counts and out over four, opacity floored at 0.55 so the ring is visibly alive at any capture instant; the caption alternates "breathe in · four" / "breathe out · four". Reduced motion renders a settled mid-inhale frame; the loop pauses on document.hidden.
• The nameplate badge is an HTML element positioned over the drawn door's plaque, so the price and declaration lines are real text (selectable, screen-readable, live-region), with a tight variant under 600px that drops the long subtitle so it never covers the stones.
• Procedural Perth map in SVG: coastline, Swan River, freeway and rail hints, a dashed reach ring, sixteen suburb dots and a Subiaco star, plus a WA-outline tag for telehealth. 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 — practitioner, format, sessions, three toggles, funding — and compute() is a pure function over it: rate is the practitioner's individual or couples fee, the session line is sessions × rate, after-hours adds $30 × sessions, intake and letter add one-offs, and the funding chip contributes only declarations. render() then writes the same result to four surfaces in one pass: the scene (lit stones, tag, laptop, couples figures, review flag, door light, nameplate text), the badge (name, price, subtitle, declaration line, note line), the itemised ledger, and the plain-text mirror list under the scene. The two Medicare note cells live in compute(): couples + Medicare replaces the rebate line with the couples note on all surfaces; individual + Medicare at eleven or more sessions keeps the rebate line and adds the eleven-plus note. window.__psychology publishes the live state, the computed figures, which notes are active, whether the rebate line is present, and a settled flag set only when the latest token's settle timer fires.

Pricing model (pinned anchors)

Fees are stated as full fees; every rebate is a declaration, never a subtracted number, because the MBS rate, the NDIS price limit and a fund's extras schedule are set elsewhere and change. Totals are integer by construction and display to the whole dollar.

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

A further fourteen mixed scenarios and a two-round rapid-fire drive (ten dispatched clicks per round, no settle between) matched the oracle with the badge, ledger total and probe in agreement.

Declaration and note matrix

Conversion decisions

Accessibility decisions

• Body ≥ 17px on mobile, 18px from 760px; chips, switches, stepper and buttons all ≥ 44px tall (measured minimum 44px at 375).
• Every control is keyboard-operable. Chip groups are real role="radiogroup"s with roving tabindex, arrow-key movement that also selects, Space/Enter to select; switches are role="switch" buttons with aria-checked; stepper buttons carry aria-labels and disable at 1 and 12. Focus is a two-ring eucalypt halo on every focusable element, and the stepper's inset variant keeps it inside the rounded frame.
• Plain-text mirror of the SVG state. The scene has a role="img" label, and beneath it a <details open> list restates the drawing in words — practitioner and format, stones lit, the intake tag, the review flag, the breathing ring, the nameplate and price, and every declaration and note. The funding declarations are asserted on three surfaces (badge, ledger, mirror) so a screen-reader user hears exactly what a sighted user reads.
• Live regions on the display line, badge, ledger and stepper output; the form error is role="alert", the confirmation role="status"; invalid fields carry aria-invalid and focus moves to the first one on an empty submit.
• Reduced motion: the entrance rise, chip/card transitions and the breathing loop are switched off; the ring renders a settled mid-inhale frame; smooth scrolling drops to instant.

Local SEO we'd implement for the real business

The live page emits only WebPage / WebSite / BreadcrumbList schema naming it a demonstration — fictional business data in a real index is dishonest markup. For a real practice we would ship the block below. The top-level type is MedicalBusiness, an actual schema.org organization subtype (LocalBusiness → MedicalBusiness): schema.org does not define a Psychologist organization type, and Psychiatric-style tokens are MedicalSpecialty enumerations, which belong in medicalSpecialty, never in @type.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "MedicalBusiness",
  "name": "Kindling Psychology",
  "url": "https://www.example-practice.com.au/",
  "telephone": "+61 8 9000 0345",
  "image": "https://www.example-practice.com.au/rooms.jpg",
  "priceRange": "$230–$360",
  "medicalSpecialty": "Psychiatric",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "[street address]",
    "addressLocality": "Subiaco",
    "addressRegion": "WA",
    "postalCode": "6008",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.948, "longitude": 115.826 },
  "areaServed": ["Subiaco", "West Leederville", "Shenton Park", "Nedlands", "Wembley", "Floreat", "Leederville", "Perth", "Claremont", "Mount Lawley", "Western Australia (telehealth)"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday"], "opens": "08:00", "closes": "20:00" },
    { "@type": "OpeningHoursSpecification", "dayOfWeek": "Friday", "opens": "08:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification", "dayOfWeek": "Saturday", "opens": "08:30", "closes": "13:00" }
  ],
  "availableService": [
    { "@type": "MedicalTherapy", "name": "Individual psychology sessions (registered and clinical psychologists)" },
    { "@type": "MedicalTherapy", "name": "Couples sessions" },
    { "@type": "MedicalTherapy", "name": "Telehealth psychology across Western Australia" }
  ],
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "48" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "[consented, de-identified client]" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "[pulled from the practice's verified reviews feed]"
    }
  ]
}
</script>

Plus: a Google Business Profile with the Subiaco pin and a statewide telehealth service area, the FAQ marked up as FAQPage, and separate landing pages for the queries people actually type — "psychologist Subiaco Medicare", "couples counselling Perth", "NDIS psychologist telehealth WA".

What would change for the real client

• Booking straight into practice software: the "Request a callback" form becomes a live online-booking widget from Halaxy or Power Diary (both handle psychology appointment types, practitioner calendars and Medicare online claiming), or Cliniko where the practice already runs it — with the Session Path plan attached to the appointment note.
• Claiming: Medicare Better Access rebates processed on the day through the practice system's Medicare Online integration; HICAPS at the desk for extras — the "rebate at the MBS rate, processed on the day" declaration on the badge becomes the actual receipt.
• NDIS: invoicing to the current price limits and plan-manager submission from the same system, so the "billed under the price limit for each item" line stays true when limits move each July.
• Accounts: Xero synced from the practice system for reconciled invoices, gap payments and provider-number reporting.
• Reviews and photos: consented, de-identified feedback replacing the demo copy; real photographs of the rooms and practitioners where the drawn scene and map stand in here; the real ABN, AHPRA, Medicare, NDIS and WWC numbers replacing the placeholder patterns.
• The fee schedule driven from the practice's item list so the path reprices when fees change, and a "next available" strip from the calendar API replacing "first appointments within two weeks".

Iteration log

Kindling Psychology is a fictional business — a psychology practice industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Back to the site · Index.