Generative Assets · Industry demo guide
A fictional security installer for Balcatta and Perth's northern suburbs — alarms, CCTV and intercoms. One landing page with a single job: book the free on-site assessment. This page documents the design, the honest pricing model, and the build.
Concept
The scene the design argues from is a 9am walkthrough: the installer's iPad out, the keypad by the door showing DISARMED in green, the house calm. Security marketing usually sells dread — glass shards, hooded figures, red klaxons. Watchpost sells coverage and method: here is your house from above, here is what each camera sees, here is the price in writing. The audience is households after a break-in two streets over, FIFO families wanting eyes on the house from site, and small businesses with stock out the back. Every design decision serves one conversion: the free on-site assessment.
Palette
The red/green pair is the trade's own status language, and the page uses it as one, consistently: red = armed/covered (cones, CTA, status LED when the alarm kit is selected), green = ok/ready (links, focus rings, the doorbell, confirmation states). The header wordmark carries a live LED that flips from standby green to armed red when the planner's alarm chip is toggled — a second-read detail that ties the whole page to the keypad by the door.
Type
Signature
A procedural SVG top-down house plan — porch, hall, living, three beds, garage, driveway, yard — with component chips, a 2–8 camera stepper and a monitoring toggle. Cameras place around the plan in a fixed priority order (driveway first, then porch, rear yard, side…), each throwing a translucent armed-red view cone clipped to the lot boundary. Alarm sensors (two PIRs, keypad, siren) dot the plan in housing charcoal when the kit is selected; the video doorbell marks the porch in standby green. An estimate card renders every line in mono and hands the whole scenario to the enquiry form via "Book this plan".
Implementation notes. Each camera is two nested SVG groups: an outer <g transform> owns position and aim (attribute state), an inner path owns the CSS pulse animation — kept on separate elements because any CSS rule silently discards an SVG presentation attribute on the same element (a recurring collection lesson). The cone pulse floors at 0.52 opacity so the signature is visibly alive at any thumbnail capture instant; reduced-motion renders the cones settled at 0.62. Visibility toggles use setAttribute('hidden','') with a [hidden]{display:none !important} guard, since SVG groups have no .hidden IDL property. A state probe at window.__security exposes components, camera count, monitoring, total and form status for QA.
Honest numbers
Pinned anchors from the spec: 8-zone alarm supplied + installed $890; 4-camera 4K CCTV + NVR $1,690; extra cameras $290 each; video doorbell $390; intercoms from $780; servicing from $140; rough-ins from $60/point; back-to-base monitoring from ≈$1.10/day (external service, billed by the monitoring centre — hedged on-page as "from ≈").
Derived shape — the CCTV line. The spec pins the stepper at 2–8 cameras but only prices the 4-camera package, so the model was derived as a linear split: the package less four cameras leaves a $530 base (NVR, hard drive, switch, cable runs, setup) plus $290 per cabled camera. That gives CCTV(n) = 530 + 290n: exactly $1,690 at n=4, $1,110 at n=2, $2,850 at n=8. Below four cameras the package sheds cameras at the same $290 — the recorder and the cabling base don't shrink, which is the honest reason a 2-camera system isn't half the price of a 4-camera one.
| Scenario | Model | Card shows |
|---|---|---|
| Doorbell only (floor) | 390 | $390 |
| 4 cam + doorbell (rest) | 1,690 + 390 | $2,080 |
| 2 cameras only | 530 + 580 | $1,110 |
| Alarm + 8 cam + doorbell | 890 + 2,850 + 390 | $4,130 |
Controls never cross-compute. The alarm kit chip fixes sensors at the kit's two-PIR baseline — extra sensors are $120 each fitted, counted at the assessment, so no sensor stepper exists to guess with. The camera stepper only moves the CCTV line, and disables with an on-page reason when the CCTV package is off. The monitoring toggle disables with a reason until the alarm kit is selected — back-to-base monitoring watches an alarm panel, so pricing it against a camera-only scenario would be a dishonest figure. Monitoring never joins the install total: it is an ongoing external service and renders as its own hedged per-day line.
Measured worked example. The spec's rest scenario — 4-camera CCTV + video doorbell = $1,690 + $390 = $2,080 — is pure anchor arithmetic and the shipped card measures exactly that (verified headlessly against an independently reimplemented oracle at rest and across five driven scenarios). The planner's cheapest priced output, doorbell alone, equals the services grid's $390 floor.
Conversion decisions
Local SEO
This demo page carries only WebPage schema naming it a demonstration — fictional LocalBusiness or Review structured data in a real search index would be dishonest markup. For a real client, we would ship LocalBusiness + Review JSON-LD like this, fed by their actual details and their live review platform:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Watchpost Security",
"description": "Alarm systems, CCTV and intercom installation
across Balcatta and Perth's northern suburbs.",
"telephone": "+61-8-XXXX-XXXX",
"address": {
"@type": "PostalAddress",
"addressLocality": "Balcatta",
"addressRegion": "WA",
"postalCode": "6021",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates",
"latitude": -31.875, "longitude": 115.828 },
"areaServed": ["Balcatta","Stirling","Osborne Park","Karrinyup",
"Hamersley","Warwick","Duncraig","Mirrabooka"],
"openingHours": ["Mo-Fr 07:00-17:00","Sa 08:00-12:00"],
"priceRange": "$$",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9", "reviewCount": "180"
},
"review": [{
"@type": "Review",
"author": { "@type": "Person", "name": "Real Customer" },
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"reviewBody": "Fed from the live review platform, never typed in."
}]
}
</script>
Alongside it: a Google Business Profile wired to the same NAP, suburb-level service pages if the client wants to rank beyond Balcatta, and review markup fed from their actual platform so ratings never drift from reality.
For the real client
Process
Drove the full interaction suite headlessly: an empty submit on a fresh load flagged all five fields; a filled submit rendered the "request received" confirmation; the planner matched the independently reimplemented oracle at rest ($2,080) and across driven scenarios. The 375px screenshot caught what the asserts couldn't: the trust line rendered at y=712 — below the fold and underneath the sticky call bar. Reordered the mobile hero (h1 → trust line → CTA → intro copy) and dropped the duplicate call button at small widths, since the number already lives in the header and the sticky bar; the trust line now sits at y=393. Also nowrapped the wordmark status line (it wrapped at 375) and fixed four plan-label collisions the DOM asserts sailed past: PORCH/DOORBELL sharing a baseline, the living-room PIR sitting on the LIVING label, the keypad reading as garage furniture, and the siren on a bedroom's rear wall — keypad now sits in the hall above the front door, siren on the front wall.
One suspected defect turned out not to be one: the cones appeared to cross the lot fence in screenshots, but elementFromPoint sampling proved the clip-path was applying — the plan box background simply shares the lawn colour outside the fence. Verified before "fixing".
The rear camera's cone lost its rounded end to the lot clip and read as a sliver; reshaped cones 3 and 4 shorter and wider so their arcs land inside the boundary. Added the cable-run layer — dashed conduit lines from an NVR marker in the garage to each active camera, toggling with the stepper — which draws the "cabled, not Wi-Fi" trust claim directly on the plan (first placement collided with the GARAGE label; moved to the garage corner). Added a price-flash micro-interaction on the estimate total (a scale-and-colour pulse on change, gated behind prefers-reduced-motion). Second-read details: the header wordmark's LED and status line flip from DISARMED green to ARMED red when the alarm chip is toggled, and the planner's armed tag blinks like the real panel's LED.
Masthead first at 375px (the series' most recurrent offender): wordmark right edge 181px, call chip 355px, no collision, scrollWidth exactly 375; sticky bar fixed with a tel: link, 48px tall, inside the bottom 140px. The 1440px map screenshot found five suburb-label collisions (the ring striking Osborne Park, REID HWY over Mirrabooka, ~20 MIN against Hamersley, Stirling over the freeway, Gwelup/Hamersley overlapping) — repositioned all five, and applied the Chanel rule by deleting the outer service ring, which was pure noise under the labels. Added a fifth oracle scenario (2-camera CCTV alone = $1,110) so every row of the pricing table above is a measured value, not arithmetic on trust. Final harness: 40/40 — console-clean at 1280 and 375, reduced motion settles the cones at 0.62 opacity with the hero fully visible, keyboard Enter drives the chips, and the monitoring toggle gates honestly on the alarm kit in every state. 768px sweep clean; final copy read confirmed cross-surface consistency (the FAQ's $2,970 combo = $890 + $2,080).