Build notes · Generative Assets
How the Stronghold Screens & Doors demo was made
The concept. Stronghold Screens & Doors is a fictional Malaga maker-and-installer of security doors and window screens — 316 stainless, perforated aluminium and diamond grille. The audience is the young family securing a new place before summer, the landlord doing a whole rental in one visit, the dog owner who needs the flap in the door. The page has one job: a measure-and-quote request with the openings, mesh grade and extras already priced.
Conversion decisions
- Above the fold at 375px: name, "Security screens & doors made in Malaga, fitted across Perth", a Book-a-measure CTA, a call button, and the AS 5039/AS 5040 trust line — all before any scrolling.
- Click-to-call everywhere: tel: link in the header (a compact Call chip below 480px), repeated in the hero, the form aside, the footer, and a sticky call/quote bar on mobile.
- The signature earns its keep: the Screen Fitter is a live estimator — every stepper, chip and toggle changes an honest supplied-and-installed price, and the result pre-fills the quote form's job description (calculator → form handoff).
- Form fields: name, phone, suburb, property type, job description — what a screen maker actually needs to book a measure. Local confirmation panel only after a valid submit; a plain line marks it as a demo.
- Price anchors argued from the WA market: window screens from $180, grille doors from $520, 316 stainless doors from $940, and a declared $450 minimum visit — the same floors appear in the services grid and the estimator, so the page never argues with itself.
Palette — argued from the showroom wall
Powder-coated white aluminium, graphite frames, tensioned steel mesh, and a deep-teal powder-coat swatch. Ratios below are measured from the shipped tokens with WCAG arithmetic (not estimated).
The teal sits between 4:1 and 6:1 on the ground, so the pre-minted pair from the spec ships as designed: base teal for fills and links, #0B5450 wherever teal-coloured text needs more (badge notes, hover states). The mesh-steel token draws every weave, frame and dimension line and never sets type — the ink/line split.
Type
Sora 600/700 for display — a machined geometric with open counters that reads like a router-cut nameplate; it sets the wordmark, the display moment ("ONE DOOR, FOUR WINDOWS, MARINE-GRADE MESH" — regenerated live from the estimator state), headings, prices and buttons. Source Sans 3 carries body copy at 17px. The typographic bravery is the job set huge in Sora caps beside the drawn frontage, with the mesh grade as the teal accent word.
The Screen Fitter — signature implementation
The frontage is a procedural SVG elevation rebuilt from state on every change: a window row, the entry door (with awning, doormat, drawn path, house number 27), an optional side entry, and one or two alfresco sliders — right-aligned against the wall so the drawn measure-sheet badge owns the empty top-left. Mesh grades are three SVG <pattern> fills (diamond lattice, perf dot-field, tight stainless weave with a CSS sheen sweep clipped per panel). Every few seconds a drawn hand slides in and presses the entry door's mesh: a rAF timeline drives the hand transform, a shallow scale "flex" on the mesh group (nested inside the door so CSS never fights an SVG transform attribute), and breathing flex arcs — the trade's kitchen-table demo, drawn. The rAF delta is clamped at zero and capped, the loop pauses on document.hidden, every control handler token-invalidates the in-flight pulse before swapping state, and reduced motion renders a settled frame with the hand resting mid-press. Entrances are dual-speed: 26 ms stagger on first draw, 11 ms (520 ms cap) on every later redraw. State lives in window.__securityscreens with a settled flag so QA gates on state, never seconds.
The pricing model (pinned anchors)
GST-inclusive, supplied and installed metro-wide, made to measure in Malaga — declared on the card. Windows priced standard to 1.8 m²; bigger openings quoted on the measure.
| Opening | Diamond grille | Perforated aluminium | 316 stainless mesh |
|---|---|---|---|
| Hinged door | $520 | $680 | $940 |
| Sliding door | $580 | $740 | $1,020 |
| Window screen (to 1.8 m²) | $180 | $240 | $340 |
- Steppers: hinged 0–2 · sliding 0–2 · windows 0–8; one mesh grade across the whole quote ("mixing is fine, we split it on the measure").
- Minimum job $450 on the whole total. The exact $450 boundary is unreachable on these grids (doors start at $520; grille windows step 180/360/540), so the shipped contract is the meter-level clamp with the nearest reachable cells asserted either side: 2 grille windows = $360 → billed $450 + note; 3 = $540, note absent.
- Triple locks +$90 × the ACTUAL door count (hinged + sliding; never windows). Disabled at zero doors with the reason on-page; the choice is remembered and restored when a door returns.
- Pet door +$260 flat, needs a hinged door; same disable-with-reason and restore semantics.
- Windows ≥ 6 adds a note only ("whole-house pack on the measure — usually under this figure"); no price change.
- Zero selection is a designed state: the frontage draws empty openings and the badge reads "$ — · tick an opening", with the minimum note absent. The cheapest priced output is the $450 minimum visit, which equals the services grid floor.
- Price-less lines: oversize openings, French doors, patio enclosures and retrofit flyscreens print no number — quoted on the measure. Keyed-alike locks and fire-egress advice are a declaration, never a line item.
- Note templates ship full on the badge at ≥641px and in a pinned short form at ≤640px; the ledger and the plain-text mirror always carry the full template.
Worked examples — every one measured from the running page
| Scenario | Arithmetic | Measured |
|---|---|---|
| Rest state: 1 hinged, 4 windows, 316 stainless | 940 + 4 × 340 | $2,300 · no notes |
| Same openings, grille / perf | 520 + 720 · 680 + 960 | $1,240 · $1,640 |
| 2 grille windows only | 360 → clamp | $450 + minimum note |
| 3 grille windows only | 540 | $540 · note absent |
| Rest + triple locks | 2,300 + 90 | $2,390 |
| … + 1 sliding (locks on) | 940 + 1,020 + 1,360 + 2 × 90 | $3,500 (locks line $180, not $90) |
| Rest + pet door | 2,300 + 260 | $2,560 |
| 6 stainless windows only | 6 × 340 | $2,040 + whole-house note |
| Full house: 2H, 2S, 8W, stainless, locks, pet | 1,880 + 2,040 + 2,720 + 360 + 260 | $7,260 + note |
The harness re-derives every figure with an independently reimplemented oracle from the pinned anchors, drives the page to each full control vector, and asserts the displayed figures match — including the disable/restore round-trips and the explicit note-absence cells.
Techniques
- Procedural SVG throughout — the Screen Fitter elevation, the mesh pattern fills, the metro service-area map (coastline, Swan River, Malaga star). No raster loads anywhere.
- rAF timeline for the press-pulse with zero-clamped, capped delta; CSS keyframes only for the sheen sweep and the dog-nose wiggle, both killed under
prefers-reduced-motion. - Dual-speed entrance choreography via per-element
transition-delay; position via SVG transform attributes on outer groups, animation classes on inner groups only. - Front-end-validated quote form with a v-flag-safe phone pattern and a designed local confirmation panel — no fake network round-trip.
- Live JSON-LD restricted to
WebPage/WebSitenaming the page a demonstration (see below for what the real business would ship).
Iteration log
Pass 1 — Craft
Measured every palette pair from the shipped tokens: graphite 13.65:1, teal CTA labels 6.33:1, hover 8.76:1, teal links 5.73:1, teal-ink 7.93:1, steel-ink 5.78:1 (ground) / 6.39:1 (cards) — all at or above the spec's computed figures, no re-minting needed. The 375px masthead was the first real defect: the full phone number ran the header to 413px scrollWidth, so below 480px it becomes a compact bordered Call chip and the wordmark drops to .98rem — wordmark right edge now clears the call target explicitly. The stainless mesh pattern read sub-pixel pale at 1200 (stroke .55 → .68, opacity .8 → .9), and the measure sheet's type scale was tightened so the badge holds four lines without towering over the scene.
Pass 2 — Depth
The native-resolution screenshot review caught the composition flaws asserts can't see: the measure sheet sat over the entry door's awning, so the whole elevation was re-laid right-aligned (window row → side entry → entry → sliders) and the sheet now owns the genuinely empty top-left wall. The full-house drive (2 hinged + 2 sliding + 8 windows) overflowed the 900-unit wall — a proportional compression factor now guarantees every stepper combination draws inside the elevation. The label-collision sweep then caught the window count tag running under the sheet at full house; it moved below the sills as a drawn dimension line with end ticks, which reads more like a fitter's note anyway. Second-read details landed here: the dog nose in the pet flap, the house number 27 (moved to the lock side after it grazed the last window frame), the doormat and drawn path, the garden shrub grounding the left of frame.
Pass 3 — Hardening
Full harness green: 106 asserts across both pages, zero console errors. Every worked example driven against the independent oracle including the locks-multiply-actual-doors cell ($180, never $90), pet/locks disable-at-zero with reason text and restore-on-return, the $450 meter contract at 2-vs-3 grille windows, the zero-selection badge with the minimum note explicitly absent, and both note width-forms (full at 1000px, short at 375px, ledger always full). Two rapid-fire bursts (7 and 7 dispatched clicks with no settle) stayed consistent — the handler-side token invalidation holds. Empty submit on a fresh load keeps the confirmation panel hidden with visible validation; filled submit shows it. Reduced-motion renders the settled mid-press frame with no errors. 375px: no overflow offenders, sticky call bar inside the bottom 140px, fold carries h1 + CTA + trust line. The one ornament removed under the Chanel rule: the lower wall weep line, which doubled the ground line to no purpose.
Local SEO we'd implement for the real business
This demo deliberately ships no business-shaped structured data — fictional LocalBusiness markup in a real index is dishonest. For a real client the page would carry HomeAndConstructionBusiness (the exact schema.org organization subtype for a manufacture-and-install trade) with their real NAP, hours, geo and review feed:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HomeAndConstructionBusiness",
"name": "Stronghold Screens & Doors",
"description": "Security doors and window screens made in Malaga and installed across Perth. 316 stainless, perforated aluminium and diamond grille, made to AS 5039 and installed to AS 5040.",
"url": "https://www.strongholdscreens.com.au",
"telephone": "+61-8-XXXX-XXXX",
"image": "https://www.strongholdscreens.com.au/photos/workshop.jpg",
"address": {
"@type": "PostalAddress",
"streetAddress": "Unit X, XX Bonner Drive",
"addressLocality": "Malaga",
"addressRegion": "WA",
"postalCode": "6090",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": -31.857, "longitude": 115.899 },
"areaServed": "Perth metropolitan area",
"openingHoursSpecification": [
{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "07:00", "closes": "16:00" },
{ "@type": "OpeningHoursSpecification", "dayOfWeek": "Saturday", "opens": "08:00", "closes": "12:00" }
],
"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 client's actual Google Business Profile feed."
}]
}
</script>What changes for the real client
Their photos of real installs replace nothing structural — the procedural elevation stays as the estimator. Their review feed (Google Business Profile) replaces the demo copy. Measure bookings wire into ServiceM8 or Tradify so the form creates a job, not an email; quoting syncs to Xero; the mesh-grade chips read from a real powder-coat colour matrix; and supplier ordering feeds (Capral or Ullrich aluminium) are the kind of integration that turns the measure sheet into a live bill of materials. The reserved phone number, placeholder ABN and fictional reviews all swap for the real ones — the AS 5039/AS 5040 references are already real.