Generative Assets · Industry Demos · how it was made

How the Blackline Chauffeurs demo was built

Blackline Chauffeurs is a fictional chauffeur, stretch limousine and Sprinter transfer operator working out of a Belmont depot beside Perth Airport — airport runs with the flight tracked, hourly charter, wedding cars and Swan Valley wine tours across the metro. The page exists for the Applecross couple who need the airport at 4:40 am, the bride's mother booking three cars for Cottesloe, the Subiaco firm with a board visiting and eight mates heading to the valley. Its single job is a booking request with the vehicle, service, hours and passenger count already priced — honestly, to the whole dollar.

The Trip Quoter

The signature element is a drawn SVG side elevation of the chosen car on a night road — gloss-black duco with a champagne pinstripe, headlights raking the road, a city skyline and stars behind, the waiting passengers on the kerb. Every control redraws the scene and reprices the trip from the pinned anchors:

• Vehicle chip redraws the car: sedan, SUV (taller, roof rails, bigger wheels), stretch limousine at exactly twice the sedan's wheelbase (300 vs 150 scene units, the bar lit through the middle windows) or Sprinter (high roof, the long window band, a sliding door line).
• Service chip redresses the scene: airport transfer draws an airliner climbing top-right with a contrail and blinking nav light and a "T1 · T2 →" sign by the road; hourly charter keeps the skyline; wedding ties the ribbon across the bonnet with a bow at the nose and sets a bouquet on the rear shelf; the Swan Valley wine tour swaps the skyline for hills and seven receding vine rows and warms the sky to dusk.
• Passengers stepper draws that many waiting figures on the kerb beside the car — drawn cap 11, the stepper's ceiling, every count drawable — with a bag or a suitcase on every fourth or fifth. The booking card carries the count.
• After-hours toggle deepens the sky and hangs a moon upper-left.
• A slow loop slides the road dashes under the car and breathes the headlight glow (opacity floor 0.55 — alive at any capture instant); reduced motion parks dashes and glow at mid-breath. Chip swaps redraw snappy; the road loop is token-invalidated in the handler before the state swap.
• The price badge is drawn as a chauffeur's booking card — ivory paper, a double champagne pinstripe top and bottom, two lines always: the total and the service line pinned per service. Preferred anchor upper-right on the sky; never over the car, the figures or the sign. On-scene at ≥641 px, docked beneath the road inside the signature container at ≤640 px (with a phone-width viewBox crop, 0 90 1080 530, to enlarge the car); a two-column 258 px variant in the 641–900 px band so the card stays off the car when the scene is narrow.

Pinned anchors (GST inclusive, metro Perth included, no tolls)

Airport transfers are the vehicle's flat fare with the hours stepper disabled and the reason on-page ("Airport transfers are a flat fare — hours don't apply"); the hours value is remembered and restored when another service is chipped, clamping up to that service's floor. Hourly charter, weddings and wine tours multiply the hourly rate by the hours; weddings add a flat $120 for ribbons, red carpet and sparkling (always on for a wedding, absent on every other service); the wine tour's tastings and lunch stop are a declared "$0 — we book the cellar doors for you" line; after-hours pickups (11 pm – 5 am) add a flat $40 at every combination, airport included. Passengers change no price — they pick the car: more passengers than seats FORCES the smallest vehicle that seats them, disables every smaller chip with "seats n", and restores the remembered vehicle when they fit again. The hours stepper's minimum is the applicable floor; a change that raises the floor clamps hours up and flashes the stepper; nothing ever auto-lowers. Beyond the metro carries no number anywhere — "quoted by the kilometre" on the card, the ledger, the screen-reader mirror and the FAQ. Every rate is a whole dollar and every stepper is whole units, so no total ever needs rounding; there is no empty state — a vehicle and a service are always selected.

Worked examples measured from the running page

All pinned worked figures, the cheapest-output floors ($120 / $220 / $450 / $550 / $380 + $720 / $290 + $570, equal to the services grid) and 36 random control vectors were cross-checked against an oracle reimplemented from the anchors in the verification harness, not from the page's own code — 302 assertions in Pass 2 and 330 in the final pass (site + this guide), all green. The rest-state figure measured from the running page is $1,080; the grid floor is $120.

Palette — argued from black duco and a champagne pinstripe

Gloss-black ground, ivory body ink, champagne for the CTA fill, rules, chip outlines, the headlight glow and the card's pinstripe, and a dusk blue that does real work in the scene's sky and the map's water. Contrast ratios below were computed with WCAG arithmetic from the shipped tokens in Pass 1 (role, hex and ratio from the same script row).

Every spec figure held on the shipped grounds; no token moved. Two tokens were minted beyond the spec: the muted ivory for secondary copy (the spec's champagne is for lines and CTAs, not a second body ink) and the two paper inks for the ivory booking card.

Type

The display moment is the rest-state line set over the scene — "$1,080 · STRETCH · WEDDING · 4 HOURS" — rebuilt from state on every change so the figure is always the live total; the separators travel with the token that follows them so a wrap never strands a dot at a line end.

Techniques

• Procedural SVG scene, no libraries. The backdrop (sky gradient, a seeded 72-star field, footpath, kerb, road) is drawn once; the skyline or vine rows, the moon, the aircraft, the sign, the car, the beams, the figures and the live road paint live in a dynamic group rebuilt on every state change. Each vehicle is a hand-set body path with clipped glass polygons, a reflection streak, the champagne pinstripe, wheels with champagne rims and a ground shadow; the beams are two gradient polygons from the headlight with a radial pool on the road.
• Dual-speed redraw. First paint staggers each drawn part at 26 ms (1.4 s cap); every later state change redraws at 10 ms per part with a 500 ms cap via a firstDraw flag. Parts animate opacity only — never a property they also set as an SVG attribute.
• Token-invalidated loop. Road dashes (a stroke-dashoffset), the breathing beams and pool, two twinkling stars, the spire and aircraft lights and the meteor run in one requestAnimationFrame loop whose token is bumped in every handler before the state swap; the old loop exits on its next frame, the rebuilt scene starts a fresh one, and the probe's loops count settles back to exactly one — asserted after two rapid-fire bursts. Delta time is clamped at zero and capped at 50 ms; the loop idles while the tab is hidden.
• Second read. A meteor crosses the sky once every 14 seconds (between 9.0 and 9.7 s of each cycle — never at the 7-second settle); the aircraft's nav light and the spire's beacon blink; the stretch's bar is lit through its middle windows; every fourth or fifth waiting figure carries a bag or a suitcase.
• Micro-interaction. A stepper value bumps (scale 1.08) when it changes, and when a vehicle or service change clamps the hours up to a higher floor the whole stepper flashes a champagne ring for 0.9 s — the page shows the clamp rather than silently moving a number.
• Reduced motion. CSS media query plus a matchMedia check: no loop starts, dashes and glow are painted once at mid-breath, the entrance transitions, the hero rise and the bump are off.
• State probe. window.__limohire carries vehicle, service, hours, passengers, after-hours, the remembered vehicle and forced flag, every line, the total, floor, note strings (full and short), line 2, the hours-disabled reason, the disabled-vehicle reasons, the declarations, the card's rendered text, loops and a settled flag — QA gates on state, never on seconds.

Conversion decisions

• Above the fold at 375 px: business name, "Chauffeured cars, stretch limousines and Sprinter transfers across Perth — airport, weddings, wine tours, corporate", Book a car + Call (08) 9000 0366, and the est. 2011 / flights tracked / $20M liability trust line — all inside the first viewport, measured (trust line bottom 737 px of 812; wordmark right edge 216 px vs call button left edge 240 px).
• Call vs book: most chauffeur bookings are planned, so the primary CTA is "Book a car" with the phone a visible ghost button; on phones a sticky bar carries Call now + Book a car above the thumb.
• The quoter feeds the form. Vehicle, service, hours, passengers, after-hours and the total pre-fill the booking textarea with a "Specific car:" prompt; "Book this trip" refreshes it and focuses the name field. Form fields are what a dispatcher needs to hold a car: name, mobile, pickup suburb (the eight map suburbs, Perth Airport, elsewhere in the metro, beyond the metro), pickup date and time, an optional flight number for the tracking feed, and the details block.
• Honest floors. The services grid's "from" prices are the Quoter's cheapest outputs — the sedan at each service's minimum — and the service line, the minimum note, the wine-tour and passengers declarations and the beyond-metro line appear wherever the total does. Hours are disabled with the reason on an airport transfer rather than computing a fare that isn't hourly.
• Local confirmation, no fake network. Empty submit flags the required fields inline and keeps the confirmation hidden; a valid submit shows the designed panel ("Thanks — booking request received. We'd call you back within two business hours…") naming the car, the suburb and the fare, clearly marked as a demonstration.

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 operator must not mark itself up as a real one. For the real client we would ship the block below. schema.org has no chauffeur or limousine organisation subtype, and TaxiService is a Service type rather than an organisation, so the top-level type is the plain LocalBusiness with the trade named through additionalType, knowsAbout and a hasOfferCatalog of TaxiService offers. Real reviews would be pulled from Google Business Profile and marked up only with the reviewer's consent.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "additionalType": "https://www.wikidata.org/wiki/Q1373441",
  "name": "Blackline Chauffeurs",
  "description": "Chauffeured cars, stretch limousines and Sprinter transfers from Belmont beside Perth Airport — airport, weddings, wine tours, corporate.",
  "url": "https://www.example-blackline.com.au/",
  "telephone": "+61 8 9000 0366",
  "image": "https://www.example-blackline.com.au/fleet.jpg",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Belmont",
    "addressRegion": "WA",
    "postalCode": "6104",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.95, "longitude": 115.93 },
  "areaServed": ["Perth", "Subiaco", "Cottesloe", "Applecross", "Joondalup", "Fremantle", "Swan Valley", "Rockingham"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"], "opens": "00:00", "closes": "23:59" }
  ],
  "knowsAbout": ["chauffeur hire", "airport transfers", "stretch limousine hire", "wedding cars", "Swan Valley wine tours", "corporate transport"],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Chauffeur services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "TaxiService", "name": "Airport transfer — sedan" }, "priceSpecification": { "@type": "PriceSpecification", "price": "120", "priceCurrency": "AUD", "description": "flat fare, Perth Airport to anywhere metro" } },
      { "@type": "Offer", "itemOffered": { "@type": "TaxiService", "name": "Hourly chauffeur — sedan" }, "priceSpecification": { "@type": "PriceSpecification", "price": "220", "priceCurrency": "AUD", "description": "from, 2-hour minimum" } },
      { "@type": "Offer", "itemOffered": { "@type": "TaxiService", "name": "Wedding car — sedan" }, "priceSpecification": { "@type": "PriceSpecification", "price": "450", "priceCurrency": "AUD", "description": "from, 3 hours, ribbons and sparkling included" } },
      { "@type": "Offer", "itemOffered": { "@type": "TaxiService", "name": "Swan Valley wine tour — sedan" }, "priceSpecification": { "@type": "PriceSpecification", "price": "550", "priceCurrency": "AUD", "description": "from, 5 hours, cellar doors booked" } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "212" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "Real customer, with consent" },
      "datePublished": "2026-05-02",
      "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 with the Belmont depot pinned and the booking link wired, "chauffeur Perth Airport" / "limousine hire Perth" / "Swan Valley wine tour transport" as the page's core phrases with the suburbs above as secondary, NAP consistency across the wedding and corporate-travel directories, and a reviews feed that updates without anyone touching the page.

What changes for the real client

• Dispatch and bookings: Limo Anywhere or Moovs for the booking engine, driver app, dispatch board and the driver's-name text the evening before — the Quoter's scenario becomes a real reservation with the fare locked, not a textarea.
• Flight tracking: a flight-tracking feed (FlightAware is the kind we'd wire) keyed off the flight-number field, so the 45-minute free wait runs from the actual touchdown and the dispatcher sees the delay before the passenger does.
• Stripe deposits on confirmation and card-on-file for corporate accounts; Xero for the monthly invoice with the booker's cost centre on each line.
• Google Business Profile booking link and reviews feed, the operator's own photographs of the fleet, the real ABN, on-demand authorisation and insurance certificates, and the real phone number in place of the reserved pattern.

Iteration log

• Pass 1 — Craft. Contrast measured from the shipped tokens — every spec figure held (ivory 15.78:1 / 14.15:1, champagne CTA labels 8.83:1, champagne ink 11.82:1, map labels 7.80:1 over the water), and the muted ivory and the two paper inks were measured before use (8.81 / 7.49 / 5.15:1). Screenshots at 375 / 1000 / 1200 native: the header nav wrapped at 1200 ("Trip Quoter", "Where we drive") — nowrap and a tighter gap; the masthead overflowed at 641–760 (a 749 px scrollWidth) — the wordmark tag now hides at ≤900 and the call button goes icon-only at ≤760; the airport "T1 · T2" sign sat under the booking card at 1200 — moved left and lower (kept below y 344); the card's foot line wrapped — shortened; the ledger's total line wrapped to three lines at 375 — the service line is now its own "Includes ·" row above a one-word "Fare" total; the wedding ribbon was too faint to read as a V — thicker arms, a drawn bow with tails and a champagne knot; the map's Mandurah note said 35 km, corrected to about 70 km; the car moved 30 units left (rear at 300) and a two-column 258 px booking-card variant was added for the 641–900 px band after the mid-width check showed the tall card covering the Sprinter's nose. Drove every worked example, the capacity force and memory-invalidation sequences, the rapid-fire burst, empty and filled submits, the three widths and reduced motion: 299 assertions green.
• Pass 2 — Depth. Added the meteor (once per 14 s, never at the settle), ground shadows under the waiting figures, the stepper bump and the clamp flash (a champagne ring on the hours stepper for 0.9 s whenever a vehicle or service change raises the hours to a higher floor — asserted in the harness immediately after the drive and cleared 1.1 s later); the aircraft's nav light and the spire beacon blink in the loop; the stretch's bar lights through its middle windows. Re-drove everything: 302 assertions green, one road loop after each rapid-fire burst.
• Pass 3 — Hardening. 375 masthead measured (wordmark right edge vs call button left edge, no collision), scrollWidth 375 with zero offenders outside scrolling ancestors, sticky bar with ≥44 px targets on a solid ground, h1 + CTA + trust line inside the first viewport; the badge docks beneath the scene at 640 and sits on-scene at 641 and 1000 with the FULL note form at ≥641 and the SHORT form at ≤640 (ledger and mirror always full); label-collision boxes for the sign, the car, the figures and the aircraft against the card at 1200; reduced motion verified (no loop, mid-breath glow, identical frames a second apart, controls still work); v-flag form patterns compiled in Node; zero console errors on both pages; the Chanel rule removed the paving joints on the footpath; final copy read in Australian English; this guide probed at 375 and 1200 for overflow, one h1, the schema panel and the colophon. 330 assertions green in the final run.

Two semantics the spec left to composition were resolved here: lowering passengers from a forced vehicle to a count the remembered car still can't seat leaves the current (larger) car in place until the remembered one fits (7 → 4 keeps the stretch when the memory is the sedan; 4 → 3 restores it), and a forced change applies the new car's floor with a visible clamp rather than a silent one. The restore memory is cleared only by an explicit vehicle-chip change while forced; otherwise it survives until the passengers fit again.