Build guide · site 357 · Wave 40, Industry Demos XXIX

How the Ember & Rye food truck demo was built

A fictional flame-grill food truck out of Fremantle doing private events across Perth — weddings, birthdays, corporate lunches and street-food nights. The page has one job: an event quote request with the package, guest count, zone and extras already priced.

Concept

The audience is the couple pricing their wedding's late-night service, the EA booking a site lunch for forty, the thirtieth birthday in a Hamilton Hill backyard, the brewery booking a Friday residency. Event catering is priced per head with a hard floor — the truck, the crew and the fire cost the same for twenty as for fifty — so the page makes that arithmetic visible instead of hiding it behind "get in touch": pick a package, count heads, name the zone, flick the extras, and the quote chalks itself onto the A-frame beside the truck. It's the wave's second dark site: dusk, festoon light, a little smoky — the page should feel like standing in the queue while the grill flares.

The signature is the Service Window — a drawn SVG scene of the truck side-on at dusk. The open serving window glows warm; a drawn cook works a spatula loop over the flat-top while flame licks breathe and ember sparks rise; festoon strings sag from the roof to poles either side; and a drawn queue follows the guests stepper (drawn cap twelve — the tag prints the true count). The package chip redraws the pass (The Classic slides out a burger-and-chips tray; The Feast adds a second tray and a charred corn cob); the zone chip redraws the backdrop (the Fremantle container crane and Norfolk pines for Freo & inner, the scarp and a line of lit rooftops for outer metro, open paddocks with a windmill for beyond); the toggles draw their marks (marshmallow skillet on the pass, iced drinks tub beside the truck, a "3 HRS" tag on the window frame). At 150 guests the second serving window opens — awning props out, a second cook appears, and a short second queue forms at it.

Palette — measured, not assumed

Every ratio below was computed with WCAG relative-luminance arithmetic from the shipped hex tokens (the spec's figures were computed at authoring; Pass 1 re-measured from the shipped tokens). One correction: the spec paired white labels with tomato #D24A35 at a claimed 5.3:1, but the measured figure is 4.40:1 — under the 4.5 floor. Per the standing two-token remedy the argued hue was kept for marks and large display type, and a deeper tomato #C23C29 was minted as the button fill (white on it 5.29:1 — almost certainly the pairing the spec's 5.3 figure was computed from). The pre-minted hover #A83322 (6.64:1) and lighter tomato-ink #E8836F (6.20:1 on the ground) shipped as pinned.

Type

Techniques

• Procedural SVG scene, built in JS. One 1020×560 viewBox rebuilt per state: a five-stop dusk gradient sky with stars and a crescent moon, a zone-keyed backdrop (container crane rising behind the truck's roofline + Norfolk pines / scarp with lit rooftops / paddocks, windmill and the road out), bitumen ground with warm light pools, two festoon strings sampled from quadratic curves with per-bulb phase offsets, the truck (box, cab, wheels, awning, glowing serving window with shelf jars and hanging utensils in silhouette), and the drawn queue in two staggered rows with amber rim-light so the silhouettes read against the dark ground.
• The animation loop drives bulb glow pulses, three breathing flame licks (opacity floored at 0.55 — the signature is visibly alive at any capture instant), rising ember sparks, exhaust smoke wisps, the cook's spatula arm (a rotate around the shoulder joint; the second cook runs phase-shifted), the marshmallow glow, and a moon that climbs the longer the page is open (second read — as is the gull on the left festoon pole). dt = min(max(now − last, 0)/1000, .05) — clamped at zero and capped; the loop pauses on document.hidden; reduced motion renders one settled frame.
• The chalkboard A-frame is HTML, styled as timber frame + chalk board with CSS legs, positioned on clear drawn ground beside the cab — so the price, zone line, declaration and notes are real text: selectable, screen-readable, an aria-live region. Three width treatments: absolute in-scene above 1100px and from 641–959px; folded flat below the scene at ≤640px (short note forms) and in the 960–1100px band (full forms) so it never compresses the scene at tablet-landscape widths.
• Dual-speed redraw: the first render staggers in at 70 ms per element (900 ms cap); every later state change redraws at 26 ms (300 ms cap) via a firstDraw flag. Every control handler bumps a token before touching state; entrance timers and the settle timer check it, so rapid-fire clicks end on one definite settled state.
• A plain-text mirror under the scene re-states the whole quote — scene, lines, notes, total — as a list, so the drawn queue and its marks have a screen-reader equivalent that carries the same numbers.
• No libraries — vanilla JS, one <style>, Google Fonts the only external request; the favicon is an inline SVG data-URI.

Signature implementation

State is one object — package, guests, zone, three toggles — and compute() is a pure function over it: package line = max(rate × guests, $1,400) with the minimum note flagged when the raw figure is under the floor; dessert and drinks multiply the actual guest count even when the package line bills the minimum; the extra hour and outer-metro fee are flat; "beyond the metro" computes no total at all — the badge swaps to the designed quoted-state prompt with the food-and-service subtotal declared beside it, and the same declaration prints on the ledger total line and the mirror. render() rebuilds the scene synchronously and writes every text surface in one pass: display line, badge (price, zone, declaration, notes in full and short forms), ledger, mirror, control states and the form pre-fill. window.__foodtruck publishes state, every computed line and a token-gated settled flag.

Pricing model (pinned anchors)

All rates × any guest count on the ×10 grid are whole dollars — integer-safe by construction; totals display to the whole dollar. The estimator's cheapest output equals the services grid floor: private events from $1,400 (Classic × 20 = $560 → billed $1,400).

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

Conversion decisions

• Above the fold at 375px: wordmark, "Flame-grill food truck for Perth events — the fire comes to you", Get-a-quote and Call buttons, and the trust chips (registered food business under the real Food Act 2008 (WA), est. 2019, crew of two) — all measured inside the first 740px viewport.
• Click-to-call in the masthead (number hidden under 640px so the wordmark never collides) and a fixed Call / Get-a-quote bar on mobile. No emergency-line treatment — nobody has a burger emergency; the sticky bar sells the scarce thing instead: the date.
• Form fields: name, phone, suburb, event date (type=date — the date is the scarce resource, so it's a first-class field), event type (wedding / birthday / corporate / community), a site-and-crowd textarea (access, power, dietaries — the three things a truck actually needs to know) and the pre-filled quote from the Service Window. Front-end validation with per-field messages and aria-invalid, no pattern attributes; the confirmation panel is hidden on load and on empty submit and appears only after a valid filled submit.
• Signature → form handoff: "Book this date" writes the package, guests, zone, extras, any minimum note and the quote (or the quoted-by-the-km declaration) into the textarea and focuses the name field.
• Honesty: reserved phone (08) 9000 0357, placeholder ABN 00 000 000 357 and FB 0000 patterns, suburb-level address only. The Food Act 2008 (WA) and the City of Fremantle registration context stay real — that's how WA food trucks are actually registered. The "find the truck" strip is three named demo spots, labelled as demo copy with no live feed claimed; reviews are the spec's three stories as demo copy.

Local SEO we'd implement for the real business

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 Ember & Rye we'd ship a FoodEstablishment entity — the exact schema.org organization type; there is no food-truck subtype, so the food-establishment type carries the NAP, the service area and the reviews feed:

{
  "@context": "https://schema.org",
  "@type": "FoodEstablishment",
  "@id": "https://emberandrye.example/#truck",
  "name": "Ember & Rye",
  "image": "https://emberandrye.example/truck-at-dusk.jpg",
  "url": "https://emberandrye.example/",
  "telephone": "+61 8 9000 0357",
  "servesCuisine": ["Burgers", "Barbecue"],
  "priceRange": "$28–$38 pp",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Fremantle",
    "addressRegion": "WA",
    "postalCode": "6160",
    "addressCountry": "AU"
  },
  "areaServed": ["Perth", "Fremantle", "Cockburn", "Melville", "Joondalup", "Mandurah"],
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "168" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "P. — wedding, Bicton" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Midnight service at our wedding — the dance floor emptied into the queue and came back happier."
    }
  ]
}

Alongside the markup: a Google Business Profile as a service-area business anchored to Fremantle, an events-catering landing section per event type (buyers search "wedding food truck Perth", not "catering"), the find-the-truck strip fed from the booking calendar so the page always shows real upcoming spots, and a reviews feed synced from Google.

What would change for the real client

• Booking pipeline: the quote form would land in HoneyBook or Dubsado — enquiry → quote → contract → deposit in one thread, with the date-conflict check automatic. The "we'd call you back within one business day" promise becomes a workflow, not a hope.
• On-truck sales: Square for the find-the-truck nights, with the same menu items so event quoting and street trading reconcile.
• Accounts: Xero, with HoneyBook invoices and Square settlements posted through; GST on catering handled correctly.
• Content: their photography (the truck at dusk sells itself), their Instagram feed replacing the drawn scene's supporting role, their real ABN, registration and phone, and their real spot calendar in the find-the-truck strip.

Iteration log

Ember & Rye is a fictional business — a food truck industry demonstration designed & built by Sapience Analytics, part of the Generative Assets collection. Back to the site · Index.