Build guide · Industry demo

How the Ampline EV Charging demo was built

A fictional Joondalup electrical contractor installing home EV chargers, built as a conversion-first landing page. The audience is a new EV owner tired of public charging queues; the page's single job is a booked install with the charger, cable run and switchboard work already priced.

Concept

The wave's second dark site: the driveway at 11pm, charge light on. Everything on the page argues from that scene — night-graphite ground, headlight-white ink, a single charge-amber accent that always means energy, and circuit-silver linework for the house, cable and dimensions. The signature is the Charge Fit: a side-profile SVG night scene where the charger, cable route, switchboard and solar choices redraw the install — and price it — in real time.

Palette

The spec's contrast figures were hypotheses (W32/W33): measured by WCAG arithmetic during Pass 1, the amber came in at 7.2:1 on the night ground (spec guessed ≈7 — held) and 7.2:1 as a CTA fill under graphite labels (spec guessed ≈8 — still comfortably past 4.5:1, recorded honestly). Body white measured 14.7:1 (spec ≈14). No remedy tokens needed on the dark ground; the silver stays lines-and-marks per spec, with #B7C3CE minted for muted body copy.

Type

Chakra Petch 600–700 for display — a squared engineering face whose dash-cluster corners read like conduit fittings and switchboard labels; it carries the wordmark, prices, and the sky-set display moment "FORTY KILOMETRES OF RANGE, EVERY HOUR." IBM Plex Sans is the workhorse: legible at 16–17px on the dark ground, technical without being cold. Typographic bravery is spent once — the charge-rate line set huge across the night sky inside the SVG scene, swapping honestly when the 22 kW chip is picked ("UP TO 120 KM AN HOUR — IF YOUR CAR KEEPS UP.").

The Charge Fit — how it works

The scene is one hand-built SVG (780×470): house, pitched roof, lit window, garage, EV side-profile, moon and stars — every visual procedural, no raster. The cable route is a single <path> built from the state: switchboard → up the wall → along the eaves → down to the charger, with the charge lead running on to the car's port. Extra metres insert a switchback detour on the garage wall whose width grows per metre, with one amber tick per metre placed by getPointAtLength — so "+8 m" is literally eight ticks of extra conduit on the drawing. Amber energy pulses travel the full route on a rAF loop (five pulses, positions sampled from the live path each frame so a mid-animation chip swap can never index a stale path — the W25 token race designed out structurally). Pulse opacity floors at 0.55, so the signature is visibly alive at any thumbnail capture instant. The rAF delta is clamped at zero and capped (W29). The switchboard toggle swings the board door open and lights the RCBO bay; the solar toggle draws roof panels and runs lighter "day-glow" pulses down a dashed feed line. The price badge sits on the charger unit itself — the estimate is part of the scene, not a ledger below the fold — and drops its subtitle below 560px so it never covers the drawing at 375 (W34).

Redraws are dual-speed (W21): the first render dash-draws the cable route over 1.2s as the entrance; every later state change swaps the path instantly and re-settles within ~520ms, tracked by a settled flag on the window.__evcharging probe. Reduced motion skips the entrance, parks the pulses at a mid-run frame at fixed opacity, and never starts the loop. The header, sticky bar and cards are all solid fills — no backdrop-filter anywhere near conversion chrome (W28).

Honest pricing model

All five worked examples from the spec were driven through the running page and matched an independently reimplemented oracle exactly: rest $1,890 · 7 kW +8 m + switchboard $2,844 · 22 kW + solar $3,180 · 7 kW +20 m $2,650 (max-run note at 20, absent at 19) · 22 kW +12 m + both options $4,286. The cheapest estimator output ($1,890) equals the services grid floor. The 22 kW readout ships the honest hedge verbatim: many cars cap AC charging at 7–11 kW, and the page says so rather than selling speed the car can't take. Totals display to the whole dollar; every anchor is integer-safe by construction.

Conversion decisions

• Above the fold at 375: name, "Home EV charger installs across Perth", the book/call CTAs and the licence trust line all land before the first scroll; the Charge Fit scene (and its $1,890 badge) share the 1200×750 thumbnail with the hero.
• Click-to-call everywhere: tel: link in the header, a solid sticky call/book bar on mobile — a tradie's customer is a phone in one hand.
• Form fields: name, phone, suburb — plus car make & model, because the car's on-board AC charger decides whether 22 kW is worth paying for; asking early makes the callback useful.
• Planner→form handoff (W12): "Book this install →" writes the configured scenario and estimate into the enquiry textarea — the demo interaction becomes a warmer lead. It never overwrites a visitor's own words.
• Confirmation is a designed panel — hidden on load and on invalid submit, shown only after a valid one, promising a callback within one business hour. Nothing fakes a network round-trip.

Local SEO we'd implement for the real business

This demo page deliberately ships only WebPage/CreativeWork/BreadcrumbList structured data — fictional business schema in a real index would be dishonest markup. For a real client, we'd ship Electrician — the exact schema.org organization subtype for the trade, not a generic LocalBusiness — with real NAP, service area, offers and a genuine review feed:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Electrician",
  "name": "Ampline EV Charging",
  "url": "https://www.example.com.au",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Joondalup",
    "addressRegion": "WA",
    "postalCode": "6027",
    "addressCountry": "AU"
  },
  "areaServed": { "@type": "City", "name": "Perth" },
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
    "opens": "07:00", "closes": "17:00"
  },
  "makesOffer": [
    { "@type": "Offer", "name": "7 kW home EV charger — supplied and installed",
      "priceSpecification": { "@type": "PriceSpecification", "price": 1890, "priceCurrency": "AUD" } },
    { "@type": "Offer", "name": "22 kW three-phase EV charger — supplied and installed",
      "priceSpecification": { "@type": "PriceSpecification", "price": 2790, "priceCurrency": "AUD" } }
  ],
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "87" },
  "review": {
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from the client's actual Google Business Profile feed."
  }
}
</script>

Alongside it: a Google Business Profile wired to the booking flow, suburb-level service pages for the northern corridor, and review schema fed from real jobs — never typed in by hand.

What would change for the real client

• Their jobs, their photos — real install photography would replace nothing structural; the procedural scene stays as the planner, their vans and boards appear in a gallery strip.
• Booking straight into the job system — the form posts into simPRO or AroFlo as a lead with the Charge Fit scenario attached, so the scheduler sees "22 kW + switchboard, Duncraig" before the callback. Invoicing reconciles through Xero.
• Live pricing — anchors maintained in one place (the same numbers the estimator, grid and schema read), so a supplier price rise is one edit, not five.
• Real compliance strings — actual EC licence number, ABN, insurances; the reserved placeholders exist only because this business doesn't.

Iteration log

Techniques

• Hand-authored SVG night scene; JS-built route path + per-metre ticks via getPointAtLength
• rAF pulse loop with zero-clamped, capped delta; opacity floor 0.55; paused when hidden; parked under reduced motion
• Dual-speed redraw with a firstDraw dash entrance and a settled probe flag
• CSS-only star twinkle and LED breathing, all inside prefers-reduced-motion guards
• No libraries, no build, no raster — one HTML file per page

← Back to Ampline EV Charging · Generative Assets index