Generative Assets · Industry demo 310 · Wave 30

How Truepoint was built.

Truepoint Antennas & Data is a fictional Morley TV-antenna and data-cabling operator, built as a one-page conversion demo for the trade: a customer with a pixelating telly should reach a priced plan and an enquiry inside a minute. The page's single job is a warm enquiry with the reception band and point count already attached.

Palette — a dusk rooftop and a meter on full bars

The whole site is the trade's best moment: standing on a roof at dusk, the meter hitting full bars. Dark by design — one of the wave's two dark sites — with the amber reserved for the things a signal meter makes glow.

Small muted text gets its own ink (#A7B4C4, ≈8:1) rather than leaning on the alloy line token — the ink/line split from the collection's learnings, applied from the first draft.

Type — technical without cosplay

Space Grotesk (600–700) carries the display voice: the wordmark, the headline with its amber full stops, and the meter's percentage — the page's one moment of typographic bravery, a 46px readout ticking to 90% inside the SVG scene. IBM Plex Sans does the body work: engineered enough to sit beside a wiring standard, warm enough for a tradie's landing page.

The Signal Planner — how the signature works

The planner is one inline SVG scene (720×400): rooftop silhouette, mast, the Bickley transmitter on the horizon — the real site nearly every Perth antenna points at, and the map's honest anchor — with a dashed beam path running TX-to-antenna. The reception band chips don't just reprice: they swap the drawn hardware between a log-periodic and a longer high-gain rig with a reflector, because that's what the $80 difference actually buys. Steppers light windows in the house (amber for TV points, pale blue for Cat6), the amplifier toggle hangs a masthead amp on the mast, and the ledger prices every change from the pinned anchors.

Engineering notes: a single persistent requestAnimationFrame loop reads live state each frame, so control mashing can never strand a stale closure — handlers bump the animation token and swap the tick's from/to/start before any state lands (the W25 rule). The rAF delta is clamped at zero and capped (dt = min(max(now−last,0)/1000, .05), the W29 rule). The meter ticks with entrance choreography on first draw (1.4s) and snappily (450ms) ever after via a firstDraw flag. Every continuous animation — the pulsing top bar, the TX beacon, the flickering telly window — keeps opacity ≥ 0.55, so the 7-second thumbnail can land at any instant and the scene reads alive. Reduced motion renders the settled frame immediately. State is exposed at window.__antennas (scenario, computed figures, settled flag) so QA gates on state, never on seconds.

The pricing model — pinned anchors, measured outputs

Measured from the running page and verified against an independently reimplemented oracle: rest state (metro, 2 TV, 1 data, amp off) totals $880; fringe with 1 TV point and the amp totals $840; the amp-suggestion boundary sits at exactly 3 extra TV points ($860 with the note, $1,040 with the amp on); and the planner's cheapest output, metro with no extras, is $440 — equal to the services grid floor. All totals are whole-dollar by construction (integer steppers × integer rates). Zero corrections against the spec's worked examples.

The meter's percentage is an illustrative signal-margin readout, not a field measurement: band base (metro 96 · hills-shadow 88 · coastal fringe 82, on the correct hardware) minus 3 per extra TV split, plus 10 with a masthead amp, clamped 40–99. The direction of every term is honest physics — splitters cost margin, masthead amplification restores it, terrain sets the ceiling — and the model is documented here precisely so the demo never passes it off as a measurement. Data points don't touch the meter: Cat6 doesn't hang off the splitter.

Conversion decisions

• Call first, plan second. Trade traffic is a phone in one hand: tel: link in the masthead, amber call button as the hero's primary CTA, and a sticky call/quote bar at 375px. The planner is the second path for the researcher who won't ring yet.
• The planner pre-fills the form (band, points, amp, estimate) — the enquiry lands warm, which is the point of the whole toy. The notes field stops syncing the moment the visitor types.
• Form fields: name, phone, suburb, a "what's happening" select tuned to the trade's actual triage (pixelating / no signal / extra points), and the pre-filled notes. Nothing that doesn't earn its keystroke.
• Honest anchors over bait: every service card carries the real floor ("from $440", "$120 credited same-visit"), the fault-callout credit is stated where the price is, and the roof-crawl card prints no number at all rather than a fake one.
• The confirmation is a designed local state — hidden on load and on invalid submit, shown instantly after a valid one, and it says plainly that nothing was sent. No fake network round-trip.

Local SEO we'd implement for the real business

The demo page ships only WebPage/BreadcrumbList structured data, because fictional business schema in a real index is dishonest markup. For a real Truepoint, we'd ship this (schema.org has no antenna or cabling subtype, so HomeAndConstructionBusiness is the correct parent type — with real NAP, real reviews from the Google Business Profile feed, and service-area suburbs):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Truepoint Antennas & Data",
  "description": "TV antenna installation, extra TV points and Cat6 data cabling across the Perth metro.",
  "telephone": "+61-8-XXXX-XXXX",
  "url": "https://www.example.com.au",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Morley",
    "addressRegion": "WA",
    "postalCode": "6062",
    "addressCountry": "AU"
  },
  "areaServed": ["Morley", "Dianella", "Noranda", "Bayswater", "Bedford", "Perth"],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:00", "closes": "16:30"
  }],
  "priceRange": "$120–$1,500",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "187"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from the live Google Business Profile feed, never hand-written."
  }]
}
</script>

Alongside it: a Google Business Profile with service areas rather than a shopfront pin, suburb-level landing sections for the corridors that convert (hills-shadow suburbs search differently to coastal ones), and review schema fed from the live profile — never typed in.

What changes for the real client

Swap the demo scaffolding for their operations: enquiries land in ServiceM8, simPRO or Tradify (whichever runs their day) rather than a demo panel, with the planner scenario carried in the job description; the booking slot offer wired to the field diary; reviews pulled live from the Google profile; job photos replacing nothing — this page is deliberately all-procedural, and it would keep that speed advantage. Invoicing stays wherever it lives (usually Xero); the site's only job is handing the job over warm.

Iteration log

1. Pass 1 Craft

   • The meter panel sat top-left and covered the antenna hardware — the whole band-swap signature was invisible behind it. Moved the panel top-right and re-routed the beam path to dip beneath it.
   • The phone field's pattern threw a console error at validation time — Chrome compiles patterns as v-flag regexes and unescaped parentheses are illegal in a v-mode class (the collection's W19 lesson, caught by the zero-console-errors assert). Escaped them.
   • "DARLING SCARP" clipped off the map's right edge — re-anchored the label end-aligned.
   • The hero's left column ran ~500px short against the planner card at 1200 — added the 01/02/03 "plan → install → read the meter" strip, which also happens to be the sales pitch.

2. Pass 2 Depth

   • Second-read detail: the base-point window flickers like a telly being watched (opacity 0.56–1.0, inside the never-invisible floor).
   • The ledger total now ticks — a 500ms scale-and-amber pulse on change only, skipped on first draw and under reduced motion.
   • Amp-note copy became stateful: a suggestion when the amp is off ("splitting past three points usually needs one"), a confirmation when it's on ("covers a 4-way split").
   • Lengthened the high-gain rig and gave it a visible reflector so the chip swap reads at a glance, not on inspection.

3. Pass 3 Hardening

   • 58-assert headless suite, all green: pricing oracle (independently reimplemented) at rest, fringe, hills and both sides of the amp boundary; stepper clamps at 0/6 and 0/8; empty submit leaves the confirmation hidden on a fresh navigation; filled submit shows it with the callback promise; a rapid-fire 11-click drive in one evaluate lands exactly on the oracle's figure with zero console errors.
   • The step-strip counters rendered "00 00 00" — counter(list-item) doesn't increment reliably here; switched to an explicit CSS counter.
   • 375px: masthead measured explicitly (wordmark right edge vs call button left edge), no horizontal overflow on either page, sticky call bar within the bottom thumb zone, h1 + CTA + trust signal all above the fold.
   • Chanel rule: removed the fourth signal ring from the service-area map — three rings say "coverage", four said "clutter".
   • Reduced motion verified: the meter renders settled at its target instantly, no loops run.

← Back to Truepoint Antennas & Data · Collection index