DUSKGLASSHOW THIS DEMO WAS MADE

CONCEPT

Duskglass Window Tinting is a fictional Osborne Park tint shop built as a conversion demo for the real trade: new-car owners who want ceramic before their first summer, families whose back seat cooks on the school run, and west-facing home offices unusable after 2pm. The page has one job — book a fitting — and one signature to earn it: the Tint Studio, a live side-on car whose glasshouse darkens to the VLT slider with WA's legal floors drawn on the scale, and a fitted price that refuses to exist below them. This is the dark site of Wave 21: cool-cabin dusk, lit by sky through glass, not by lamps or beacons — the relief of stepping out of Perth glare IS the product, so the page performs it.

PALETTE

Deliberately distinct from every prior dark site in the collection: towing's beacon-amber bitumen, locksmith's navy porch-light, signage's plum dusk, earthmoving's iron dusk, concreter's wet-slab charcoal, manufacturer's graphite. This dark is cool and glassy. The heat meter is the palette's argument in one strip: cyan (rejected) beating amber (let in).

TYPE

• Michroma — display. Wide technical automotive caps; kept to short lines only (wordmark, h1, section marks) because it is an all-caps face that punishes long settings.
• Instrument Sans — body and UI. Legible, contemporary, stays out of the film's way.
• Red Hat Mono — every number that matters: VLT percentages, heat figures, prices, phone. On a page arguing "measured, not magic", the measurements get a measuring instrument's face.

THE TINT STUDIO

All SVG and vanilla JS — no libraries, nothing rasterised. Three hand-drawn side-on vehicles (sedan, SUV/wagon, ute with tray) share one scene under a breathing bay light. Each window is a layer stack: sky-gradient glass, a film overlay, an interior silhouette drawn above the film, and a reflection streak on top. The slider is detented at the four standard film stops (70 / 35 / 20 / 5) with WA's legal floors drawn on the scale — 35% front floor, 20% rear floor, and a hatched amber segment below 20 labelled show-car only.

The interior floor is the honesty of the rendering: the cabin dims with the film but never fully disappears, so a 5% selection still reads as a car, not a void. In full-car mode the fronts clamp to max(VLT, 35) — the studio never draws an illegal front while the rears run to their own floor. Windscreens take a visor strip only, and the drawing honours that too: the strip is the only tinted part of the screen at any setting.

The pricing model (source of truth)

• Rest state (measured): sedan · ceramic · fronts 35% / rears 20% · $450 · heat meter 60%. Pure anchor arithmetic; the implemented model reproduces the spec's worked example exactly — no correction needed.
• Cheapest output = services floor: carbon on a ute is $290, which is the services grid's "full-car carbon from $290 (ute)" anchor. The studio cannot undercut the grid.
• Deliberate flatness: the front-two match is flat across vehicles and flat across carbon/ceramic ($160; $200 in IR+). The vehicle and film chips stay live because they still change the drawing and the heat figures — the card says so in words ("the vehicle chip still changes the drawing, not the price"), which is the honest alternative to disabling.
• Below-legal selections disable the price, not the rendering: under 20% (full car) or 35% (front-two), the card strikes to $— NOT FITTED with the reason on-page and a show-car referral. The scene caption flips to amber SHOW-CAR ONLY. A control that computed a dishonest figure — or silently no-opped — would read as a broken page.
• Heat figures are film-spec, not magic: carbon ≈45%, ceramic ≈60%, IR+ ≈78% total solar energy rejected, quoted at 35% VLT, with the "darkness is glare, ceramic is heat" line on the card.
• No studio meter for flat glass or removal: home/office ($95/m², min $380) and removal (from $120) are services-grid anchors quoted on sight — panel count and access, not a slider's business.

Every interaction updates window.__tinting (vehicle, film, scope, VLT, price, disabled state, heat, form status) so QA gates on state, never on wall-clock. The studio's configured scenario pre-fills the booking form's vehicle-&-film field — the demo interaction becomes the warm lead.

CONVERSION DECISIONS

• The studio shares the first screen with the pitch. At 1200×750 the car, the chips, the slider and the price card are all inside the fold — the thumbnail sells the interaction, not just the copy.
• Four routes to contact: header tel + CTA, hero pair, "Book this fit" on the price card, and the mobile sticky bar (Call / Book, ≥44px targets). The sticky bar is the phone-in-one-hand path.
• Form fields are the trade's intake: name, phone, suburb, preferred date (type=date, min today), vehicle & film (studio-fed, editable), free notes. Nothing a tint shop wouldn't ask on the phone.
• Legality as a trust device, not fine print. The 35/20 law gets its own band, the slider wears it as a scale, and the FAQ answers it first — being right about the rules is the shop's credibility.
• Local confirmation, honestly local: submit shows a designed "request received / we'd call you back within the hour" panel that names itself a demo. No fake network round-trip.

LOCAL SEO WE'D IMPLEMENT FOR THE REAL BUSINESS

This demo page ships only WebPage schema naming it a demonstration — fictional structured data in a real index is dishonest markup. A real Duskglass would ship LocalBusiness + Review schema fed by its actual details and live review feed:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AutomotiveBusiness",
  "name": "Duskglass Window Tinting",
  "description": "Automotive and flat-glass window tinting, Osborne Park and Perth metro.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit X / XX Real Street",
    "addressLocality": "Osborne Park",
    "addressRegion": "WA",
    "postalCode": "6017",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.9OXX, "longitude": 115.8OXX },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:30", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "12:00" }
  ],
  "priceRange": "$$",
  "areaServed": "Perth metropolitan area",
  "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 reviews feed, with consent."
  }]
}
</script>

Plus: Google Business Profile with the bay's real photos, service-page URLs per job type (ceramic, front-two match, home & office), and suburb-intent copy that already exists on this page (Osborne Park base, named service suburbs, the map).

WHAT WOULD CHANGE FOR THE REAL CLIENT

• ServiceM8 — the booking form books straight into bay scheduling with buffer times per job type (full car 2–3h, front-two 1h); the confirmation stops being a demo panel and becomes a real slot.
• Film supplier portals — warranty registration wired into the job close-out, so the "both warranties in writing" promise is a workflow, not a hope.
• Square — deposits at booking, tap-to-pay at pickup.
• Xero — invoicing and reconciliation off the job record.
• Podium — before/after photos from the bay feed the review funnel; the demo's "bay book" quotes become a live feed.
• Their real photos would join the SVG system, not replace it — the studio stays, pointed at their price list.

ITERATION LOG