Build guide · Industry demo 322

How Currentline Auto Electrics was made

Currentline is a fictional Wangara auto electrical workshop — the customer is a ute or 4WD owner fitting out for touring season, or anyone whose car drains flat overnight for no reason. The page has one job: a booking with the installs already chosen and priced. It is the wave's dark site: the workshop bench at 9pm, drawn instead of photographed.

The signature — the Circuit Map

A dual-cab ute in side profile, drawn in SVG with its wiring loom visible from the battery node. Five install chips (dual battery, light bar, trailer wiring, reverse camera, UHF) each light their own circuit trace and draw their hardware — the second battery with its isolator, the bar on the bull bar, the 7-pin plug hanging at the towbar, the camera feeding a mirror monitor, the coax running up the A-pillar to the aerial. A signal-amber current pulse travels every selected circuit on a loop, and the running total lives on a battery-gauge badge on the ute's tray — the price is part of the scene, not a ledger below it.

Implementation: each circuit's path is defined once in <defs> and reused three times via <use> — an alloy base trace (the loom at rest), an amber lit overlay, and a travelling pulse. The pulse is a dash segment about 14% of the path length whose stroke-dashoffset is driven by a requestAnimationFrame loop with the delta clamped at zero and capped at 50 ms, paused when the tab hides. The lit overlay holds opacity 0.75 — a never-invisible floor above 0.55, so the signature reads alive at any thumbnail capture instant with no phase arithmetic. The entrance draws each circuit in by dashoffset (stroke hidden until drawn length > 0), staggered 180 ms per circuit; every later state change fades in 250 ms instead — the dual-speed redraw. Every chip handler bumps an animation token before the state swap, and the pulse loop reads a working set rebuilt synchronously on each render, so rapid-fire clicking can never leave a stale closure animating dead geometry. Hardware groups toggle by the hidden attribute (SVG groups have no .hidden IDL property), backed by a [hidden]{display:none !important} guard.

Second reads: the drain-check multimeter shows 12.4 V resting — select the dual-battery system and it reads 14.4 V, because now something's charging. The battery-gauge badge fills one charge bar per selected install. Hovering an unselected chip ghost-lights its circuit at 0.28 opacity, previewing where the loom would run.

The pricing model

Total = sum of selected installs + diagnostic − credit + mobile call-out. The diagnostic credit is the commercial heart: the $120 drain check is charged alone, but the moment at least one install joins it, the $120 is credited against the work — shown as a note and a price change together. The services grid floor ("diagnostics $120 — credited when we do the repair") equals the map's cheapest priced output. Full rewires carry no number by design: "quoted after we've had the dash apart — old looms keep their secrets until then."

Every figure above was driven in headless Chrome and checked against an independently reimplemented oracle (the arithmetic re-derived from the spec in the harness, not read from the page's own function). All anchors are integers, so totals are integer-safe by construction.

Palette — measured, not assumed

Argued from the dark bench, the multimeter and the loom. The spec's contrast figures were hypotheses; these are the WCAG ratios measured from the shipped tokens.

Type

Chakra Petch 600 for display — its squared, instrument-cluster geometry is the same drawing language as a dash readout, which is why the total on the tray badge is set in it, huge, like a charge gauge. IBM Plex Sans carries body copy: engineered, legible at 16px on a phone, and its tabular numerals keep the ledger honest-looking. The typographic bravery moment is the badge: $2,090 rendered as if the ute itself is reporting its own state of charge.

Iteration log

Conversion decisions

• Above the fold at 375: trade + suburb in the h1, call and book CTAs, licence chip — before any art. The Circuit Map sits beside the copy at desktop so the 1200×750 thumbnail carries the value proposition and the priced scene with its $1,120 badge.
• The signature is the quote path: chips pre-fill the booking form with the chosen installs and the estimate, so the demo interaction becomes a warmer enquiry (the field stops auto-filling the moment the visitor types their own words).
• Form fields: name, phone, suburb — then vehicle make & year, because an auto electrician triages by model before anything else; and a separate "what's it doing?" prompt because drain work arrives as a symptom, not a job name.
• The diagnostic credit is the offer: $120 is the honest entry price, credited against the repair — it de-risks the call for the drain customer, and the services grid floor equals the map's cheapest output so the page never argues with itself.
• Confirmation is honestly local: the panel appears instantly on a valid submit, promises a call-back "within one business hour", and says plainly that no message was sent — no fake network round-trip.

Local SEO we'd implement for the real business

This demo ships only WebPage/CreativeWork/BreadcrumbList structured data, because fictional business schema in a real search index is dishonest markup. For the real Currentline, we'd ship AutoRepair — the LocalBusiness-family subtype that covers auto electrical work — with real NAP, hours, geo and a live reviews feed:

{
  "@context": "https://schema.org",
  "@type": "AutoRepair",
  "name": "Currentline Auto Electrics",
  "description": "Auto electrical workshop in Wangara — dual-battery systems,
    driving lights, trailer wiring, battery and drain diagnostics.",
  "url": "https://currentlineautoelectrics.com.au",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "(real unit and street)",
    "addressLocality": "Wangara",
    "addressRegion": "WA",
    "postalCode": "6065",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.79, "longitude": 115.83 },
  "areaServed": "Perth metropolitan area",
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "12:00" }
  ],
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "(from the live reviews feed)",
    "reviewCount": "(from the live reviews feed)"
  },
  "review": [{
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "(real customer)" },
    "reviewBody": "(their words, pulled from Google Business Profile)"
  }]
}

Plus a Google Business Profile tuned for "auto electrician Wangara" / "dual battery install Perth", service pages per install type, and review capture wired into the job-completion flow.

What would change for the real client

• Their photos — the drawn ute stays as the interactive pricer, but real install photos (engine bays, labelled fuse blocks, tidy tray setups) join the services grid; proof beats illustration for trades.
• Their booking system — the form raises a job card in MechanicDesk or Workshop Software instead of showing a demo panel, with SMS confirmation of the bay time.
• Their numbers — invoicing and deposits through Xero; the Circuit Map's anchors maintained from their real price list so the site never argues with the counter.
• Their reviews — the three demo cards become a live Google reviews feed, marked up in the AutoRepair schema above.
• Their compliance — real licence number, ABN, insurance certificates, and the real street address in the NAP block.

← Back to the site · Generative Assets index