Generative Assets · Industry Demos · how it was made
How the Coldbank Refrigeration demo was built
Coldbank Refrigeration is a fictional commercial refrigeration contractor working out of a van yard in Osborne Park — cool rooms, freezer rooms, display cabinets, ice machines and condensing packs, serviced on a schedule and rescued at 2am when the seals let go. The page exists for the Northbridge restaurant whose cool room hit 9°C on a Saturday, the Balcatta food manufacturer with six cabinets on a service schedule, and the Scarborough bar whose ice machine died in February. Its single job is a callout booked with the job, the equipment, the time of day and the hours already priced — labour to the whole dollar, parts declared at cost.
The Cold Room Callout
The signature is a drawn SVG cool-room interior at 2am: an insulated door with its gasket seal line, a controller reading the room against its set point, an alarm lamp breathing amber over the door, an evaporator with turning fans and frost banded along the coil, a stainless rack of stock, the hours stacked as labour blocks along the floor and a technician at work. Four controls redraw the room and reprice the job from the pinned anchors:
- Job chip changes what is lit and what is measured. Breakdown lights the alarm lamp and the controller reads high and falls as the labour blocks stack. Scheduled service hooks a gauge manifold to the plant on two hoses, leans a ticked clipboard against the wall, parks the lamp dark and holds the controller exactly on set point. Gasket, door & seal draws the seal line thick in coil cyan with a torch beam raking slowly up and down it, and the controller sits two degrees over. New install redraws the whole room as a dashed cyan outline with a tape measure pulled across it and the controller off — nothing is lit, because nothing is running yet.
- Equipment chip rebuilds the room: walk-in cool room (evaporator, rack and crates), freezer room (a heavier rime band, icicles hanging off the coil, a strip curtain over the opening, cold rolling over the threshold and frost-edged cartons), display cabinet (a lit glass-front deli case with three trayed shelves and a kick grille), ice machine (head unit over a bin, the auger drawn through a cutaway, heaped cubes and a water line down the wall), condensing pack (outside on a plinth under sky, two guarded fans, two compressors and lagged pipework running through the wall to a louvred plant grille — no door, which is why the gasket chip disables there).
- When chip changes the light: business hours puts daylight through the doorway and a wedge across the floor with the ceiling panels on; after hours and weekend go dark under a 20% night wash with the alarm lamp casting the only warm light, and the weekend hangs a CLOSED sign on the door.
- Hours stepper stacks one labour block per hour along the floor — drawn cap 6, the stepper's own ceiling, so every value is drawable. The first block is drawn as a dashed cyan outline reading
1stand the caption beside it says what the arithmetic says: the first hour is inside the callout, and only the rest are extra. It also steps the controller down toward set point. - Second technician adds a second figure to the floor with a ladder over the shoulder.
- A single rAF loop turns both evaporator fans at different speeds and breathes the alarm lamp with an opacity floor of 0.58 — the signature is visibly alive at any capture instant, no phase arithmetic. Chip swaps redraw snappy (9 ms per part, 500 ms cap) against the first paint's 24 ms entrance; the loop token is bumped in every handler before the state swap, so a rapid-fire burst leaves exactly one loop running.
- The price badge is drawn as a riveted stainless service plate — brushed metal, four rivets, engraved ink — carrying two lines always (the total and the response line pinned per time of day) plus both standing declarations. Preferred anchor upper-right on the wall; the binding rule is that it never covers the drawn subject, which is what drove the room's whole composition (see Pass 1). On-scene at ≥641 px, docked directly beneath the room at ≤640 px with a phone-width
viewBoxcrop to enlarge the subject.
Pinned anchors (GST inclusive, labour only, parts declared)
| When | Callout (first hour on site included) | Each extra hour | Response line |
|---|---|---|---|
| Business hours, Mon–Fri 7am–4pm | $180 | $130 | on site the same day, most days |
| After hours, weeknights | $290 | $190 | a technician on the road within 90 minutes |
| Weekend & public holiday | $360 | $240 | weekend crew on call, same 90 minutes |
| Equipment | Scheduled service, flat per visit | Set point drawn | Gasket chip |
|---|---|---|---|
| Walk-in cool room | $240 | 4.0°C | available |
| Freezer room | $290 | −18.0°C | available |
| Display cabinet | $190 | 3.0°C | available |
| Ice machine (descale and sanitise included) | $220 | 2.0°C | available |
| Condensing pack | $260 | 4.0°C | disabled — "no door on a condensing pack" |
The arithmetic. A breakdown callout and a gasket, door & seal repair are priced identically, because a gasket job is a callout: the callout covers the first hour on site, so the extra-hour rate multiplies hours − 1. The second technician at $110 an hour multiplies all hours on site including the first — that asymmetry is the one thing most operators get wrong on a quote, so the page states it on the card, in the ledger and in the screen-reader mirror. A scheduled service is a flat visit price set by the equipment with no clock at all. A new install prints no number: the site visit is free and the job is quoted, so the badge carries the pinned bare-quote string rather than a "$0 + …" form. Equipment never moves a callout — the ledger says so in its own line: "a callout is a callout, whatever it's attached to". Every rate is a whole dollar and every stepper is whole units, so no total ever needs rounding; there is no empty state, because a job, an equipment and a time of day are always selected and the hours floor is 1.
Two declarations print wherever the total prints, both price-less by design: parts are charged at cost with the supplier invoice attached — no markup, and we ring you before we fit anything over $200; and refrigerant handling is done under an Arctick licence and logged. They appear on the plate (short forms at ≤640 px), in the ledger and in the mirror (full forms at every width). The Australian Refrigerant Handling Licence scheme is real and stays real on this page — only the licence number is a placeholder pattern.
Forces, locks and restore memories
| Trigger | What is forced or disabled | Reason shown on the page | Unlock behaviour |
|---|---|---|---|
| Job → scheduled service | When forced to business hours; after-hours and weekend chips disabled | scheduled services run in business hours | previous When remembered and restored |
| Job → scheduled service | Hours stepper disabled (both buttons) | a scheduled service is a flat visit price | hours remembered and restored |
| Job → scheduled service | Second technician disabled | one tech runs a scheduled service | remembered and restored |
| Job → new install | Temperature logging disabled | logging is part of the install commissioning | remembered and restored |
| Job → new install | Second technician disabled; hours and When stay selectable but priceless | the quoting visit is free — one tech, no charge | remembered and restored |
| Equipment → condensing pack while gasket is chosen | Job forced to breakdown callout; gasket chip disabled | no door on a condensing pack | gasket remembered; any door-bearing equipment restores it |
Restore memories are cleared by an explicit user change to the remembered control: chipping a job while the gasket restore is pending drops it, and an explicit When choice made while the chip is free means a later scheduled-service round trip comes back to that choice, not the older one. Because every locked control is genuinely disabled in the DOM while it is forced, the only way to change a remembered value is to change it while it is free — which is exactly the invalidation rule.
Worked examples measured from the running page
| Scenario | Arithmetic | Total | State |
|---|---|---|---|
| Rest — breakdown, walk-in cool room, after hours, 2 h | 290 + 1 × 190 | $480 | controller 8.3°C falling to 4.0; "a technician on the road within 90 minutes" |
| Cheapest output (= services grid floor) | flat 180 | $180 | business hours, 1 h — extra-hours line reads "included" |
| Breakdown, freezer room, weekend, 4 h, second tech | 360 + 3 × 240 + 4 × 110 | $1,520 | tech line multiplies 4 hours, not 3 |
| Scheduled service, ice machine · + logging | flat 220 · 220 + 90 | $220 · $310 | When forced, hours and second tech disabled |
| Scheduled service — cabinet / cool room / freezer / pack | flat | $190 · $240 · $290 · $260 | equipment sets the visit price |
| Gasket, display cabinet, business hours, 3 h | 180 + 2 × 130 | $440 | gasket line declared "at cost, invoice attached" |
| Gasket, cool room, after hours, 2 h, second tech | 290 + 190 + 2 × 110 | $700 | priced exactly like a breakdown |
| Breakdown, condensing pack, after hours, 6 h, logging | 290 + 5 × 190 + 90 | $1,330 | gasket chip disabled with its reason |
| Breakdown, cool room, weekend, 1 h | flat 360 | $360 | no extra hours |
| Breakdown, business hours, 3 h, second tech, logging | 180 + 2 × 130 + 3 × 110 + 90 | $860 | all three add-ons live |
| New install, any equipment | no number | quoted | badge prints "install — quoted after a free site visit"; ledger prints the free site visit |
| Force drive: weekend 3 h → scheduled → breakdown | 840 → 240 → 840 | $840 → $240 → $840 | weekend and 3 hours both restored |
| Memory invalidation: weekend 2 h → scheduled → breakdown → chip business hours → scheduled → breakdown | 180 + 130 | $310 | When stays business hours |
| Gasket force: gasket cabinet 2 h → condensing pack → cool room | 310 → 310 → 310 | $310 | job forced to breakdown, then gasket restored |
| Rapid-fire: business hours 2 h, then pack → ice → cabinet → freezer in one evaluate | 180 + 130 | $310 | equipment doesn't move a callout; one fan loop after settle |
Every pinned figure, both threshold drives, the two force/restore sequences, both rapid-fire bursts, all 18 first-hour cells (three rates × six hours), all six second-technician cells and the five install states were checked against an oracle reimplemented from the anchors in the verification harness — not from the page's own code. 373 assertions green in the final run across the site and this guide. The rest-state figure measured from the running page is $480; the grid floor is $180.
Palette — argued from a cool room at 2am
Near-black ground, ice-white ink, evaporator cyan on the coil and every mark, and an alarm amber that appears only where the emergency lives. The amber is rationed to exactly five surfaces: the emergency strip, the emergency call buttons, the alarm lamp in the scene, the after-hours and weekend chips when selected, and the out-of-hours ledger and badge lines. It is never a heading colour and never a general rule. Ratios below were computed with WCAG arithmetic from the shipped tokens during Pass 1 — role, hex and ratio read from the same script row.
Every spec figure held exactly on the shipped grounds and no token moved. Six tokens were minted beyond the spec and measured before use: the muted ice body ink, the fault rose, the disabled ink, and the plate's three inks (the spec pinned the plate as a scene object, not a palette).
Type
The display moment is the rest-state total set huge beside the door — $480 · BREAKDOWN · AFTER HOURS · 2 HOURS — rebuilt from state on every change, so the figure over the scene is always the live one, with the separators dimmed to stainless so the tokens read as a spec string rather than a sentence. The plate's hour token carries a non-breaking space so a narrow plate can never orphan its unit.
Techniques
- Procedural SVG, no libraries. Nothing on either page is a raster. The room is rebuilt from scratch on every state change out of hand-set paths: an insulated door with a gradient leaf and a dashed gasket line, a finned evaporator with two independently-driven fan groups, a stainless rack, a deli case, an ice machine with its auger drawn through a cutaway, a condensing pack with guarded fans and lagged pipework, and a service-area map of metropolitan Perth drawn from the coast in.
- Install mode as a draw-style, not a second scene. The quoting state reuses the exact same geometry: a module-level flag makes the element factory rewrite every fill to
none, every stroke to coil cyan with a dash pattern, and cap stroke widths at 2 px — so the room you'd get is drawn as the drawing you'd be quoted from. Decorative passes (frost, daylight, the night wash, the floor and wall joints) are skipped outright rather than dashed. - Dual-speed redraw. First paint staggers each drawn part at 24 ms with a 1.4 s cap; every later state change redraws at 9 ms per part with a 500 ms cap via a
firstDrawflag, so a chip tap reads as a snap rather than a replayed entrance. - Token-invalidated loop. Both fans, the breathing alarm lamp, the condensate drop and the gasket torch run in one
requestAnimationFrameloop whose token is bumped inside every handler before the state swap; the old loop exits on its next frame and the probe'sloopscount settles back to exactly one — asserted after two rapid-fire bursts. Delta time is clamped at zero and capped at 50 ms, and the loop idles while the tab is hidden. - Second read. A drop of condensate falls from the evaporator into the drain every nine seconds, phased so it is never mid-fall at the seven-second thumbnail settle; the two fans turn at different speeds so they beat against each other; the gasket torch beam drifts slowly up and down the seal; the controller's reading walks down toward its set point one labour block at a time; and the freezer's cold rolls out over the threshold in slow ellipses.
- Micro-interactions. The hours value bumps when it changes, and the plate's price stamps — a 0.34 s scale-and-fade, like a figure being pressed into metal — whenever the total moves.
- Reduced motion. A CSS media query plus a
matchMediacheck: no loop starts, the fans are painted once mid-turn and the alarm lamp is parked lit, the entrance transitions, the hero rise, the bump and the stamp are all off. Two screenshots 1.2 seconds apart are byte-identical, and every control still prices correctly. - State probe.
window.__refrigerationcarries the job, equipment, time of day, hours, both toggles, every ledger line, the total and its text, the quoted flag, both line-2 forms, all five disable reasons, all five restore memories, both declarations, the controller reading and set point, the plate's rendered text,loopsand asettledflag — QA gates on state, never on seconds.
Conversion decisions
- Above the fold at 375 px: the emergency strip with the 24/7 number as a live
tel:link, the wordmark, an icon-only amber call button, the business name, "Commercial refrigeration across Perth — cool rooms, freezer rooms, cabinets and ice machines, 24/7 breakdown", both CTAs and all three trust signals — measured inside the first viewport, with the wordmark's right edge explicitly clear of the call button's left edge. - Call beats form, and the page says so with colour. A cool room at 9°C is a phone call, not a form fill, so the primary CTA is the amber emergency call and "Book a callout" is the ghost. On phones a sticky bar carries a two-line amber "Call now / 24/7 breakdown" beside the booking button. The amber ration is what makes this work: because nothing else on the page is amber, the emergency surfaces read as emergency rather than as decoration.
- The estimator feeds the form. Job, equipment, time of day, hours, both add-ons and the total pre-fill the "what it's doing" textarea with a prompt, and "Book this callout" refreshes it and focuses the name field. The form asks only what a dispatcher needs to load a van: name, mobile, business name, suburb, the equipment (make and model if they have it — "it's usually on the plate inside the door") and the description.
- Honest floors. The services grid's "from" prices are the estimator's cheapest outputs — $180 / $290 / $360 for the three callout rates, $190 for the cheapest scheduled service, $180 for a gasket job, +$90 and +$110 for the add-ons — and the install card carries the quoted state rather than inventing a number. Every control either changes the price honestly or is disabled with its reason on the page; none of them silently no-ops.
- Local confirmation, no fake network. An empty submit flags the required fields inline and leaves the confirmation panel hidden; a valid submit reveals the designed panel naming the caller, the business, the suburb and the live figure, repeating the parts declaration, and saying plainly that this is a demonstration page and nothing was sent anywhere.
Local SEO we'd implement for the real business
The live page carries only WebPage, WebSite and BreadcrumbList structured data naming it a demonstration — a fictional contractor must not mark itself up as a real one, and there are no fictional reviews or ratings in the index. For the real client we would ship the block below. schema.org has no refrigeration-contractor type, so the top-level type is HVACBusiness — the nearest true organisation type for commercial refrigeration service — with the specialty named through additionalType, knowsAbout and a hasOfferCatalog of priced services. Reviews would be pulled from the Google Business Profile feed and marked up only with the reviewer's consent.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HVACBusiness",
"additionalType": "https://www.wikidata.org/wiki/Q1058314",
"name": "Coldbank Refrigeration",
"description": "Commercial refrigeration across Perth from Osborne Park — cool rooms, freezer rooms, display cabinets, ice machines and condensing packs, 24/7 breakdown.",
"url": "https://www.example-coldbank.com.au/",
"telephone": "+61 8 9000 0375",
"image": "https://www.example-coldbank.com.au/van-yard.jpg",
"priceRange": "$$",
"address": {
"@type": "PostalAddress",
"addressLocality": "Osborne Park",
"addressRegion": "WA",
"postalCode": "6017",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": -31.90, "longitude": 115.81 },
"areaServed": ["Perth", "Northbridge", "Balcatta", "Malaga", "Scarborough", "Cannington", "Fremantle", "Joondalup"],
"openingHoursSpecification": [
{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "07:00", "closes": "16:00" },
{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"], "opens": "00:00", "closes": "23:59", "description": "24/7 breakdown line" }
],
"knowsAbout": ["commercial refrigeration", "cool room repair", "freezer room service", "display cabinet service", "ice machine descale", "condensing pack installation", "Arctick refrigerant handling"],
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "Refrigeration services",
"itemListElement": [
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Breakdown callout — business hours" }, "priceSpecification": { "@type": "PriceSpecification", "price": "180", "priceCurrency": "AUD", "description": "callout includes the first hour on site; extra hours $130" } },
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Breakdown callout — after hours" }, "priceSpecification": { "@type": "PriceSpecification", "price": "290", "priceCurrency": "AUD", "description": "weeknights; extra hours $190" } },
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Breakdown callout — weekend and public holiday" }, "priceSpecification": { "@type": "PriceSpecification", "price": "360", "priceCurrency": "AUD", "description": "extra hours $240" } },
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Scheduled service and gas check" }, "priceSpecification": { "@type": "PriceSpecification", "price": "190", "priceCurrency": "AUD", "description": "from, display cabinet; flat per visit by equipment" } },
{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Gasket, door and seal repair" }, "priceSpecification": { "@type": "PriceSpecification", "price": "180", "priceCurrency": "AUD", "description": "from, plus the gasket at cost" } }
]
},
"aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "186" },
"review": [
{
"@type": "Review",
"author": { "@type": "Person", "name": "Real customer, with consent" },
"datePublished": "2026-06-14",
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"reviewBody": "Pulled from the live Google Business Profile feed — never hand-written."
}
]
}
</script>
Alongside the schema: a Google Business Profile pinned to the Osborne Park yard with the after-hours number wired as the primary call action, "commercial refrigeration Perth" / "cool room repair Perth" / "emergency refrigeration Perth" as the core phrases with the suburbs above as secondary, an FAQ block mirroring the on-page questions, NAP consistency across the hospitality and food-manufacturing directories, and a reviews feed that updates without anyone touching the page.
What changes for the real client
- Asset register and scheduled-service recurrence: Simpro or AroFlo — every cool room, cabinet and pack on site with its serial, refrigerant charge, service interval and history, so the scheduled-service chip becomes a real recurring job against a real asset rather than a flat price.
- Temperature monitoring: a monitoring feed on the rooms that raises a job automatically when a room drifts off set point for longer than its defrost cycle — the controller drawn on this page becomes a live reading, and the callout is booked before the operator notices.
- After-hours dispatch: Fergus or ServiceM8 for the on-call run — the estimator's scenario becomes a dispatched job with the rate locked, the van's stock checked and the technician's name texted to the site.
- Xero for invoicing with the supplier invoice attached to the parts line, which is what makes the at-cost promise auditable rather than a slogan; Google Business Profile for the reviews feed; the operator's own photographs of their vans and installs, their real ABN, Arctick and electrical contractor licence numbers, and their real phone number in place of the reserved pattern.
Iteration log
- Pass 1 — Craft. Contrast measured from the shipped tokens with WCAG arithmetic: every spec figure held exactly (ice 15.79:1 / 14.17:1, coil cyan 8.47:1 / 7.60:1 and 8.47:1 under dark labels, alarm 9.90:1 / 8.88:1, stainless 3.84:1 confirmed lines-only), and the six minted tokens were measured before use (8.10 / 8.98 / 6.11 / 10.35 / 4.87 / 4.66 / 5.18:1). Three real defects, all found by driving rather than loading. (a) Two form
patternattributes carried an unescaped/inside a character class, which modern Chrome compiles under thevflag and rejects — the page threw atcheckValidityand both fields silently stopped validating; escaped, and the zero-console assert is what surfaced it. (b) The 375 px masthead overflowed to a 445 px scrollWidth because the amber call button still carried its text label; it now goes icon-only at ≤640 px with a screen-reader label and a shortened label from ≤820 px. (c) The riveted plate covered the stainless shelving at 1200 px — the badge is genuinely large because both standing declarations must print in full at ≥641 px, so rather than shrink the declarations the whole room was recomposed around it: the plate went two-column at every on-scene width and widened tomin(244px,40%), the evaporator moved to the left-centre of the back wall, the controller dropped to eye height beside the door, the rack became a low floor rack, and every equipment subject moved into the corridor between them. Also drove all 15 worked examples, both force/restore sequences, the memory-invalidation drive, all 18 first-hour cells and both rapid-fire bursts. - Pass 2 — Depth. The screenshot review caught the defect every state assert had sailed past: the whole room was rendering as a black box. The night wash was a single
<rect opacity="0.2">carrying the entrance.partclass, and the class'sopacity: 1discarded the SVGopacitypresentation attribute — turning a 20 % night tint into an opaque blackout over the door, the evaporator, the rack and the floor while the DOM probe cheerfully reported nine groups at full opacity with correct bounding boxes. The wash now lives inside its own.partgroup with the attribute on an inner rect: layout state and CSS animation on separate nested elements. With the room visible, the depth work followed — the wall, floor and ceiling gradients were lifted off the page ground, the frost became a rime band plus larger crystals with icicles on the freezer coil, the floor joints were rebuilt to converge on a real vanishing point, cold now rolls over a freezer threshold, the alarm lamp casts a second wider glow so it lights the room rather than just itself, and the plate's price stamps when the figure changes. The quoting state was rebuilt too: its badge had blown to roughly 700 px tall and covered half the scene, so the quoted plate is forced single-column; install strokes are capped at 2 px (a dashed 15 px door frame read as a barcode); the floor and wall joints are suppressed in the drawing; and the hours caption was rewritten so a quoted install never talks about callout pricing. - Pass 3 — Hardening. Native-resolution screenshots at 375 / 1000 / 1200 with an explicit label-collision sweep: the temperature controller was sitting on top of the display cabinet at every width (subjects moved right of it), and the SEAL CHECK label and the torch body were crowding the hours caption (both relocated). Plate-versus-display, plate-versus-lamp, plate-versus-fan and plate-versus-shelving boxes are now asserted at 1200 and across the 900 / 1000 / 1100 mid-width band, plus the 641 px boundary where the plate must still be on-scene with the full note forms. At 375: scrollWidth exactly 375 with zero offenders outside scrolling ancestors, the wordmark's right edge measured against the call button's left edge, the sticky bar's tap targets at ≥48 px on a solid ground (no
backdrop-filteranywhere), the plate docked beneath the artwork with the short declaration forms while the ledger and mirror keep the full ones, and the h1 clamp and lede tightened until the value proposition, both CTAs and all three trust signals fit the first viewport. Reduced motion verified (no loop, fans parked mid-turn, lamp parked lit, identical frames 1.2 s apart, controls still pricing); DPR and resize handled by the SVG's own viewBox swap; bothpatternattributes compiled clean; zero console errors on both pages; this guide probed at 375 for overflow, one h1, the schema panel and the colophon. The Chanel rule removed the tape-measure caption — the dimension and the dashed room already said it. Final run: 373 assertions green.
One semantic the spec left to composition was resolved here: the alarm lamp is lit whenever the job is a breakdown, at any time of day, and dark for a scheduled service, a gasket repair and an install. The time-of-day chip controls the room's ambient light, not the lamp — so an after-hours gasket job is lit by the technician's torch and an after-hours install reads as a drawing, which keeps the amber ration honest instead of spending it on a second lamp.
This is a demonstration build by Sapience Analytics. Want one pointed at your customers?