How it was made · site 348 · Industry Demos XXVII

Clearline Windscreens — the Glass Map

A landing page for a fictional Malaga mobile windscreen business, built to convert a stone-chipped commuter or a tradie with a smashed ute window into a booking request with the vehicle, the glass, the damage and the extras already priced — and the insurance-excess declaration in plain sight.

Concept

Clearline Windscreens is fictional: mobile chip repair, windscreen, side and rear glass replacement and ADAS camera recalibration, based in Malaga and working across Perth metro. The audience is the person whose windscreen went from a chip to a crack overnight, the parent with a running crack across the passenger side, the tradie with a side window smashed in the carpark, and the fleet manager. The page has one job — a booking request with the job already priced — and one signature: the Glass Map, a drawn car that reshapes to the vehicle class, lights the selected pane and shows the repair or the replacement happening, with the price stuck to the glass like a windscreen sticker.

Landing page only, every pixel procedural (SVG, CSS gradients — no raster loads), no libraries beyond Google Fonts. Category: industry demo; the trade is windscreen repair.

Palette — measured, not assumed

Argued from a clean pane, a slate dashboard, the green-teal edge of tempered glass and amber repair resin under UV. Every ratio below was computed from the shipped hex values with WCAG relative-luminance arithmetic in Pass 1 (the spec's figures were hypotheses).

Secondary tokens: soft ink #4B5B66 6.29:1 on the ground; on the slate ledger the copy inks measure 13.84:1 (#EAF1F4), 11.11:1 (#C7DCE1), 8.18:1 (#A9BEC6, detail lines) and 8.95:1 (#9CCBD2, labels); the note colour #F3D48A measures 10.99:1; slate on the amber Sapience button 7.03:1. The two-token remedy (W33/W36) was applied as pinned: teal stays the button and mark colour, teal-ink carries every teal-coloured word.

Type

Barlow Condensed 700 for display — the width of a workshop sign, set in caps with tight leading for the h1, the section heads, the run line above the scene and the price on the sticker. Nunito Sans for everything you read: 17px body, 16px inputs, 13.5–15px support copy, all measured against the grounds above. The typographic moment is the run line above the drawn car — ONE SUV WINDSCREEN, CAMERA RE-AIMED — which rewrites itself per class, glass, damage and extras (three stone chips, resin-filled · one van rear screen, heater lines live · one ute side window, swept out, refitted).

The signature — the Glass Map

A 640 × 400 SVG rebuilt from geometry tables on every state change. Five front-view outlines (hatch, sedan, SUV & 4WD, ute, van) are generated from a parameter table — overall width, roof width, roof height, shoulder line, bonnet depth, plus class marks: roof rails for the SUV, a bull bar and a light bar for the ute, a flat face and badge ring for the van. The windscreen chip keeps the front view; the side-window chip swaps to a three-quarter (side-profile) view from a second table of five body polygons with the front door glass as the lit pane; the rear-screen chip mirrors the front geometry into a tail view — tail lights, plate, wiper, heater lines drawn through the pane, a split line for the van's barn doors and a smaller cab window over a drawn tray for the ute.

Damage drives the loop. Chip repair draws one to three seven-point resin stars on the pane with a drawn injector over the first; over a 4.2-second cycle the plunger presses, the amber column in the barrel drops, a resin disc grows into each star and the star fades to a faint mark, then resets. Replacement draws a crack across the pane by dash-offset (hidden until drawn length is above zero, W15), then the old pane lifts 44 units and fades to a 0.55 floor while a new teal-edged pane lowers in from above and settles, then holds under a sheen sweep — a five-second cycle, so the seven-second thumbnail lands mid-lift with the calibration board in front, exactly the pinned rest scene. The maximum of old-pane and new-pane opacity never drops below 0.55 (asserted by sampling 26 frames). The rAF delta is clamped min(max(now − last, 0)/1000, 0.05) (W29); the loop pauses on visibilitychange and never starts under reduced motion, where a settled mid-lift frame is rendered once. There is no canvas, so the DPR cap has nothing to cap; resize re-ticks the settled frame and the badge is positioned in percentages of the SVG box so it tracks the pane at any width.

Toggles draw their marks: ADAS adds the calibration target board on a stand at the front-left, a camera housing behind the mirror and a dashed sight line between them that crawls; rain-sensor adds an amber gel pad and label at the top of the pane; insurance clips a small "insurer billed" claim card to the price sticker. The price badge is HTML positioned over the SVG at the pane's lower-right corner (bottom-right anchored on the front and tail views, bottom-left anchored beside the door glass on the side view so it never covers the cab), tilted −2°: total in Barlow, a short subtitle, and a second line — you pay your policy excess — we bill the rest to your insurer — present only when the insurance toggle is on. Below 600px it moves to a tight variant parked in the bumper corner above the class tag so it never covers the drawn pane at 375. Every control handler bumps a token before touching state; the scene rebuild is synchronous and the loop reads scene references refreshed by each render, so a rapid-fire click sequence never leaves a stale closure alive (W25). First draw staggers the drawn groups at 110 ms (1.2 s cap); later redraws run at 26 ms (420 ms cap) via a firstDraw flag (W21). window.__windscreens exposes the scenario, intent (remembered choices), lock and live flags with their reasons, ledger lines, total, note, insurance line, badge text, mirror text, run line, view, frame count and a live settled flag.

Pricing model — pinned anchors, measured outputs

GST-inclusive; mobile fitting across Perth metro included and stated on-card; outside metro quoted. All totals are whole dollars by construction.

Cheapest outputs equal the grid floors: chip repair from $110, windscreens from $380, side glass from $260, rear screens from $420. Every figure above was read from the running page through the state probe and compared against an oracle reimplemented separately in the harness; zero spec corrections were needed.

Conversion decisions

• Above the fold at 375: eyebrow, the h1 naming the trade and the area, a shortened sub-line (the second sentence hides below 560px), two full-width CTAs (book / call) and two trust chips — all above the sticky bar. On desktop the same-day line ("Cracked today? Call before 2pm") sits under the trust chips; on mobile it moves into the sticky bar so it isn't shown twice.
• The signature shares the thumbnail with the hero: the run line and the scene card sit in the right column at 1200 wide; the scene box (top 144px) and the $770 sticker both intersect the first 750px, asserted in the harness.
• The estimator sits directly under the hero with the ledger sticky on desktop, so the number stays in view while you change class or glass. "Book this job" in the ledger jumps to the form with the job pre-filled.
• Form fields: name, phone, the suburb the car is parked in (the mobile business needs to know where, not who), rego or make and model (a glass lookup by rego is how the real business confirms the part before calling), and the job textarea pre-filled from the Glass Map — the W12 handoff — which stops overwriting once you edit it. Validation is front-end only, with visible errors and focus moved to the first invalid field; the confirmation panel is hidden on load and on an empty submit and appears only after a valid one, echoing what was received. No fake network round-trip.
• Insurance is a declaration, not a number. The excess is set by the policy, so the page prints the retail figure, says who pays what on three surfaces, and never guesses an excess.
• Sticky bar: the same-day line plus Call now and Book a fit, solid white ground, no backdrop-filter, shown below 900px.

Local SEO we'd implement for the real business

The demo page carries only WebPage / CreativeWork / BreadcrumbList schema declaring it a demonstration — fictional business data must not enter a real index. For the real Clearline we would ship the block below (an AutoRepair organisation with a service catalogue, areas served, opening hours and a reviews feed pulled from Google Business Profile), plus a suburb-level service page strategy (Malaga, Joondalup, Ellenbrook, Fremantle, Rockingham, Mandurah), an FAQ block matching the on-page questions, and Google Business Profile posts for the same-day fit.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AutoRepair",
  "name": "Clearline Windscreens",
  "image": "https://clearlinewindscreens.example/og.jpg",
  "url": "https://clearlinewindscreens.example/",
  "telephone": "+61 8 9000 0348",
  "priceRange": "$110–$850",
  "address": { "@type": "PostalAddress", "addressLocality": "Malaga", "addressRegion": "WA", "postalCode": "6090", "addressCountry": "AU" },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.86, "longitude": 115.90 },
  "areaServed": [ "Perth", "Joondalup", "Wanneroo", "Ellenbrook", "Midland", "Fremantle", "Cannington", "Armadale", "Rockingham", "Kwinana", "Mandurah" ],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "07:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification", "dayOfWeek": "Saturday", "opens": "08:00", "closes": "13:00" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog", "name": "Mobile auto glass",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Windscreen chip repair" }, "price": "110", "priceCurrency": "AUD" },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Windscreen replacement" }, "price": "380", "priceCurrency": "AUD" },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "ADAS camera recalibration" }, "price": "250", "priceCurrency": "AUD" }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "212" },
  "review": [
    { "@type": "Review", "author": { "@type": "Person", "name": "Priya" }, "datePublished": "2026-07-30",
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Crack ran overnight, replaced in the driveway by lunch, camera recalibrated, cured by two." }
  ]
}
</script>

What would change for the real client

• ServiceM8 for the job — the booking form posts a job with the Glass Map payload (class, glass, damage, extras, rego) so the office sees the priced job, not a free-text enquiry; SMS confirmation and the two-hour arrival window come from its scheduling.
• Glass-parts catalogue lookup by rego (the supplier's part finder) so the rego field resolves to an exact glass part number, whether it carries a camera bracket, a rain-sensor pad, heating and acoustic laminate — the estimator's class chips become a fallback for cars the lookup doesn't resolve.
• Insurer claim portals — glass claims lodged direct with the major insurers' repairer portals, the excess collected on the day, the balance invoiced to the insurer.
• Xero for invoicing and the insurer receivables ledger; Google Business Profile reviews replacing the demo copy; the real photos of the vans and the ADAS rig replacing the drawn car where the client wants them (the SVG stays as the estimator).
• Real ABN, licence and association details, and a real address if the client wants a workshop bay published.

Iteration log