Build guide · site 356 · Wave 40, Industry Demos XXIX
A fictional forklift and high-risk work licence trainer in a Welshpool yard — LF counterbalance, LO order picker and WP boom EWP courses, new operators and experienced-operator assessment prep, on-site group training across the Perth industrial belt. The page has one job: a course booking request with the class, the experience level, the trainees and the venue already priced.
The audience is the warehouse casual who needs the LF ticket to go permanent, the operator whose licence lapsed while working east, and the ops manager standing up four crew on one course without losing a day of dispatch. Licence training is priced per person by class and experience, so the page lets the buyer set the whole booking before ringing — and it makes the trade's three commercial facts visible: the WorkSafe assessment happens on course day, the WorkSafe licence application fee is set by WorkSafe and paid direct (an at-cost declaration, never a number), and on-site training bills a four-seat minimum because the trainer, gear and paperwork travel the same for two as for four.
The direction is the training yard at 7am — gunmetal slab under sodium lights, chalk line-marking, powder-blue pallet racking, a safety-yellow machine. The signature is the Licence Yard — a drawn SVG yard where the course chip changes the machine AND the work: LF draws a counterbalance forklift lifting a pallet to the second rack beam and lowering it on a slow loop; LO draws an order picker riding its platform up the racking face, operator harnessed; WP swaps the racking for a light tower and articulates a knuckle boom up to it, with a ≥ 11 m dimension line drawn beside the tower. The experience chip redraws a schedule card clipped near the fence (three-day strip "learn / practise / assess" or a one-day "brush up + assess"); the trainees stepper (1–8, all eight drawable, so the drawn count is always honest) lines hi-vis figures along the chalk; the venue chip swaps the Steelyard gate and fence for a client warehouse wall with a "YOUR SITE" A-frame; eLearning leans a glowing tablet on a cone; a Saturday intake pins a SAT tag to the schedule card. The assessor stands watching with a clipboard — and the price badge IS his clipboard sheet.
Every ratio below was computed with WCAG relative-luminance arithmetic from the shipped hex tokens (the spec computed the same figures at authoring time; they matched to the decimal). Safety yellow carries dark labels, never white — gunmetal on yellow is 9.93:1 and stays 7.70:1 on the pressed/hover fill. Racking blue measures 4.33:1 on the ground, so it draws lines and marks only; anything blue that is read uses the pre-minted blue-ink.
Two seats, three days, one ticket each
Archivo Black for the wordmark, headings, the display line, the badge price and the drawn STEELYARD gate sign — a slab-fisted grotesque that reads like stencilled plant signage. The display moment re-words itself with the controls: Eight seats, one day, one ticket each · One seat, three days, one ticket.
IBM Plex Sans 400 / 600 / 700
IBM Plex Sans for everything read — an engineering-bred workhorse whose tabular clarity keeps unit codes like TLILIC0003 and dollar figures unambiguous on a dark ground. Body 17px on mobile, 18px from 760px. Tracking only on the uppercase eyebrows and badge label.
scale(-1,1)) so the mobile badge owns the top-right sky.update(t): the LF's fork carriage rises to the second beam, holds, and lowers on a 9 s eased cycle (the pallet lands inside the bay, not beside it); the LO platform rides the mast on a 10 s cycle with a dashed harness lanyard to the rail; the WP knuckle boom articulates between working height and the tower lamps on an 11 s cycle — its pose floor is 35 % raised, so the boom never folds flat and the signature is visibly alive at any capture instant. The rAF loop clamps dt = min(max(now − last, 0)/1000, .05), pauses on document.hidden, and reduced motion renders one settled mid-lift frame.hidden with the [hidden]{display:none!important} guard, never the IDL property), with layout positioning on outer groups and animation transforms on inner ones — SVG presentation attributes and CSS animation never share an element.aria-live region. Three width variants: wide ≥ 1100px (top-left on the fence, full templates), mid 641–1099px (bottom-left on the slab, full templates per the wave pin), mobile ≤ 640px (top-right, tight, short forms).<style>, Google Fonts the only external requests.State is one object — course, experience, trainees, venue, two toggles — and compute() is a pure function over it: rate = the course × experience cell; billed seats = max(4, n) on your site, else n; course line = billed × rate; +$350 flat venue & travel on your site; eLearning = $30 × the ACTUAL count everywhere; Saturday = $40 × the ACTUAL count, live at our yard only. render() writes the result to every surface in one pass: the display line, the badge, the ledger, the plain-text mirror list, the control states (weekend disabled on your site with the on-card reason "on your site we run to your roster — weekends at no extra") and the scene. Restore is by memory: state.weekend is never overwritten by the venue chip, so your-site → our-yard restores the prior Saturday choice exactly (the pinned W36 semantic). Every handler bumps a scene token before touching state and the machine layer is rebuilt synchronously in the same pass, so a rapid-fire run of clicks can never leave a stale animation closure alive; the settle timer publishes window.__forklift.settled only for the latest token. Dual-speed redraw: 60 ms per trainee (900 ms cap) on first draw, 16 ms (380 ms cap) after.
| Course | Unit of competency | New operator (3 days) | Experienced (1 day) |
|---|---|---|---|
| LF — counterbalance forklift | TLILIC0003 | $560 | $380 |
| LO — order-picking forklift | TLILIC0004 | $540 | $360 |
| WP — boom EWP (≥ 11 m) | TLILIC0005 | $620 | $420 |
| Rule / add-on | Amount | Applies |
|---|---|---|
| Included in every course | — | training, the WorkSafe assessment on the day, logbook and PPE loan — declared on-card |
| WorkSafe licence application fee | no number | set by WorkSafe, paid direct to them at cost; we help you lodge — the declaration prints on badge, ledger AND a11y mirror wherever the total prints (short badge form ≤ 640px: "WorkSafe licence fee — paid direct, at cost") |
| Our Welshpool yard | included | machines, racking and loads included — declared on-card; no minimum (floor is 1) |
| Your site | +$350 flat | venue & travel per booking, never multiplies — AND a four-seat minimum BILLED ON THE COURSE LINE ONLY: under 4 trainees the course line bills 4 × rate with the note "billed at the four-seat on-site minimum — the trainer, gear and paperwork travel the same for two as for four" (short: "billed at the four-seat on-site minimum"); at 4 exactly, no note |
| eLearning refresher pack | +$30 pp | × ACTUAL trainees — live at every combination |
| Saturday intake | +$40 pp | × ACTUAL trainees, our yard only; DISABLED on your site with reason "on your site we run to your roster — weekends at no extra"; venue chip back to our yard RESTORES the prior choice |
| Six or more trainees | note only | "six or more — ask about a dedicated course rate for your crew" (short: "six or more — ask about a crew rate"); present at 6, absent at 5, both venues |
| VOC, refresher-only, dogging/rigging referrals | no number | "quoted" — designed price-less lines in the grid and FAQ |
Which count each line multiplies (no ambiguous cell): course line — the BILLED count; eLearning — ACTUAL; Saturday — ACTUAL; venue fee — flat. Totals are integer by construction and display to the whole dollar. The estimator's cheapest outputs equal the grid floors: LO experienced $360 · LF $380 · WP $420 · new-operator courses from $540 · on-site group bookings from $1,790 (LO experienced billed minimum, 4 × 360 + 350).
The mid-width and short note forms above are derived, not spec-pinned: the wave preamble pins the width bands (full template ≥ 641px including the 900–1100 band, short ≤ 640px) but this concept pinned only the full templates, so the short forms were written here and are documented as the builder's derivation. The ledger and mirror always carry the full template.
The harness reimplements the whole model from the spec's anchors in separate code, sets the FULL control vector for every scenario, and asserts the page's probe, badge, ledger and mirror against it — 157 asserts, all green.
| Scenario (full control vector set explicitly) | Spec | Measured | Also asserted |
|---|---|---|---|
| Rest: LF · new · 2 · our yard · both toggles off | $1,120 | $1,120 | display "TWO SEATS, THREE DAYS, ONE TICKET EACH"; no notes on any surface; WorkSafe at-cost declaration on badge, ledger and mirror; badge and stage inside the first 750px at 1200 |
| Rest + Saturday / rest + eLearning | $1,200 / $1,180 | $1,200 / $1,180 | SAT tag drawn; tablet glows on the cone |
| Your site · LF new · 2 | $2,590 | $2,590 | course bills 4 × $560; billed-minimum note on three surfaces; tag "2 drawn · 4 billed" |
| … + eLearning | $2,650 | $2,650 | eLearning multiplies the ACTUAL 2 — asserted ≠ $2,710 |
| Your site · 3 / 4 trainees | $2,590 / $2,590 | $2,590 / $2,590 | same figure, note flips: present at 3, ABSENT at 4 — both asserted |
| Saturday ON at yard → your site → back | $1,200 → $1,120 → $1,200 | same | disabled with reason on your site, memory kept, RESTORED on return |
| LO exp 1 yard / LF exp 2 / LO new 2 / WP new 2 | $360 / $760 / $1,080 / $1,240 | same | $360 is the grid floor |
| WP new 6 yard / 5 yard | $3,720 / $3,100 | $3,720 / $3,100 | crew note present at 6 on three surfaces, absent at 5 |
| WP exp 8 · your site · eLearning | $3,950 | $3,950 | 8 × 420 + 350 + 240; crew note present, billed-minimum note absent (8 ≥ 4) |
| Floors: LF exp 1 / WP exp 1 / LO new 1 / site LO exp 1 | $380 / $420 / $540 / $1,790 | same | each equals its services-grid "from" figure |
aria-invalid, no pattern attributes (the W19/W30 v-flag hazard class is avoided entirely); the confirmation panel is hidden on load and on empty submit and appears only after a valid filled submit.The live page carries only WebPage + BreadcrumbList JSON-LD naming it a demonstration — fictional business data in a real search index would be dishonest markup. For the real Steelyard we would ship an EducationalOrganization entity — an RTO is an educational organisation, and schema.org has no trade-training-centre subtype, so the organisation type carries the NAP, hours, geo and reviews — plus a Course item per licence class:
{
"@context": "https://schema.org",
"@type": "EducationalOrganization",
"@id": "https://steelyardtraining.example/#rto",
"name": "Steelyard Training",
"image": "https://steelyardtraining.example/yard.jpg",
"url": "https://steelyardtraining.example/",
"telephone": "+61 8 9000 0356",
"address": {
"@type": "PostalAddress",
"addressLocality": "Welshpool",
"addressRegion": "WA",
"postalCode": "6106",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": -31.993, "longitude": 115.947 },
"openingHoursSpecification": [
{ "@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"opens": "07:00", "closes": "16:00" }
],
"areaServed": ["Perth","Welshpool","Kewdale","Forrestfield","Canning Vale","Bibra Lake","Malaga","Wangara"],
"aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "184" },
"review": [
{
"@type": "Review",
"author": { "@type": "Person", "name": "J. — warehouse hand, Cannington" },
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"reviewBody": "Three days at the yard, assessed Thursday, licence lodged Friday — permanent the week after."
}
]
}
{
"@context": "https://schema.org",
"@type": "Course",
"name": "LF Forklift Licence (TLILIC0003)",
"description": "Three-day new-operator forklift licence course with the WorkSafe assessment on the final day.",
"provider": { "@id": "https://steelyardtraining.example/#rto" },
"hasCourseInstance": {
"@type": "CourseInstance",
"courseMode": "Onsite",
"location": { "@type": "Place", "name": "Steelyard Training yard, Welshpool" }
},
"offers": { "@type": "Offer", "price": "560", "priceCurrency": "AUD" }
}Alongside the markup: a Google Business Profile with the same NAP and hours, per-class landing sections with the unit codes in headings (buyers search "TLILIC0003 Perth"), a reviews feed synced from Google, and location copy naming the industrial estates the on-site work actually goes to.
document.hidden; resize re-layouts wide ↔ tall.This is a demonstration build by Sapience Analytics. Want one pointed at your customers?
Steelyard Training is a fictional business — a forklift and high-risk work licence training industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Back to the site · Index.