Concept
Deepshine's customer is selling a car this month, or owns a dual-cab that has had a hard year, or has watched black paint go grey with swirl. The page answers the three questions that decide the call — what does it cost for my car, do I need to be home, will it fix my problem — and the Panel Board answers the first one before a word is read. It is the wave's dark site: gloss black under LED strips, the drawn car's paint reading as wet reflection.
Palette
Every colour is argued from black paint under workshop lights: the ground is the paint, the white is the LED strip, the teal is a beading droplet after the wax, the alloy is the trim. Per the collection's ink/line split, the teal carries lines, chrome and CTAs — body text on dark is always the panel-white ink (14.6:1), and muted copy runs #A7ACB8 (≥7:1 on every panel it sits on). No backdrop-filter anywhere on conversion chrome — headers, sticky bar and cards use solid fills, because headless Chrome (which renders the collection's thumbnails) composites blur differently.
Type
Sora 600/700 for display and prices — machined geometry that suits panel gaps and dimension callouts; the display moment is the package price set at 38px inside the price badge as the gloss sweep crosses the door. Inter for everything else: body 16.5px, form labels, chips — a workhorse that stays legible at 13px on the ledger rows.
The signature — the Panel Board
An SVG car side profile whose body is generated from a parametric geometry table: four vehicles (hatch, sedan, SUV, dual-cab) share one outline builder that takes nose, tail, beltline, roofline, sill, wheelbase and rear-treatment parameters — the dual-cab grows a tub and tray, the SUV lifts its roofline and rides on 48px wheels, the hatch pulls its tail in behind a steep rear glass. Every panel the selected package covers is a closed path in a clip-path union; a skewed gradient band — the gloss sweep — travels the covered set left to right at 118 px/s (62 px/s for correction), lighting each panel teal as it crosses and leaving a tick at the panel's centroid.
Package semantics are drawn, not just priced: the wash sweeps paint only; the full detail adds glass, wheels and the seats visible through the side glass; the interior deep clean works through the glass and leaves the paint alone; correction runs a slower two-pass cut over a swirl pattern-fill that fades 0.5 → 0.22 → 0 behind a rotating buffing head. The sweep's opacity floor is 0.55 (0.75 ± 0.2 sine), so the signature is visibly alive at any capture instant, and the computed price lives on the car — a 220×92 badge on the front door whose figure is the full total, add-ons included.
Engineering guards from the collection's playbook: the rAF delta is clamped at zero and capped at 50ms; chip handlers bump an animation token before the state swap so an in-flight rebuild can never run against stale geometry; first draw gets the entrance stagger (26ms/element, 1.2s cap) while every subsequent chip tap redraws snappy (9ms, 480ms cap) behind a firstDraw flag; reduced motion renders a settled static frame — every tick shown, the band parked mid-door at 0.8 opacity. State is probed at window.__detailing with a settled flag.
Honest pricing
The whole board is a pinned 4×4 matrix plus three flat add-ons — no derived factors, no rounding decisions. The measured rest state is $430 (full detail $370 dual-cab + $60 pet hair), and the board's cheapest output ($80 hatch wash) equals the services grid's "washes from $80" floor. Mobile service is a deliberate flat statement — no callout line, no travel meter, stated on-card. Ceramic coating is the designed price-less state: quoted after a paint inspection, with the reason on the page.
| Package | Hatch | Sedan | SUV | Dual-cab |
|---|---|---|---|---|
| Maintenance wash & wax | $80 | $90 | $110 | $120 |
| Full detail | $260 | $290 | $340 | $370 |
| Interior deep clean | $190 | $210 | $250 | $270 |
| Paint correction + sealant | $520 | $580 | $660 | $700 |
| Add-ons, live in every cell: pet-hair removal +$60 · engine bay +$70 · headlight restoration (pair) +$90 | ||||
The verification harness reimplements this matrix as an independent oracle and drives all sixteen package × size cells plus every add-on toggle against the displayed badge, ledger and probe — 94 assertions, plus a rapid-fire eight-click drive with no settle between clicks to hunt swap races.
Conversion decisions
- Above the fold at 375px: business name, "Mobile car detailing across Perth — showroom finish, at your place", the Book CTA, the call button and three trust signals — before any scroll.
- The board pre-fills the form (signature → form handoff): package, size and add-on picks arrive as checked chips plus a live "Your pick" line that recomputes from the form's own state, so a visitor who diverges from the board still sees an honest figure.
- "Selling it or keeping it?" is the honest upsell question — sellers get steered to the full detail with sale-ready photos; it costs one select field.
- Click-to-call in the header and a sticky call/book bar on mobile; the confirmation panel is local and plainly a demo — "we'd call you back within one business day", nothing pretends to send.
Iteration log
Pass 1 — Craft
Found a real deadlock: add-on toggles bumped the scene token, so a toggle fired inside a redraw's settle window left the settled flag false forever — scoped the token to scene-rebuilding controls only (add-ons change price, never geometry). The hatch silhouette read as a notchback sedan — pulled the tail in 40px and steepened the rear glass. The bonnet's tick sat on the front wheel arch; moved it up to the shut line. The wash caption said "paint only" while the services grid promised wheel faces — rewrote the caption so the sweep and the service stop arguing. Widened the price badge to 220px and dropped its sub-line to 11.5px so "interior deep clean · suv · 1 add-on" fits.
Pass 2 — Depth
Correction now shows its tool: a rotating buffing head rides the sweep at beltline height, cross-spokes spinning at 300°/s, and the swirl pattern clears behind it in two passes. Added the second-read detail: when a panel completes under wash or full detail, three beading droplets spawn on the panel and fade — the brand's droplet mark, made literal. Confirmed the dual-speed redraw: entrance choreography once, 480ms-capped snappy redraws on every later chip tap.
Pass 3 — Hardening
375px masthead checked explicitly — wordmark right edge vs call-button left edge, with the nav and header CTA folded away and the tel link icon-only. Sticky bar sits inside the bottom 140px with tap targets ≥50px. Reduced motion renders the settled frame with no loop running. Phone pattern written v-flag-safe (escaped specials) and proven by the zero-console assert. Chanel rule: removed the teal floor-glow ellipse under the car — the reflection line carries it alone. Full harness: 94 assertions green, zero console errors, rest badge and board both inside the first 750px at 1200 wide.
Local SEO we'd implement for the real business
This demo page ships only demonstration schema (WebPage + BreadcrumbList) because fictional structured data in a real index is dishonest markup. For a real detailing client we'd ship AutoWash — the closest LocalBusiness-family subtype schema.org offers for detailing (there is no Detailer type) — plus a genuine review feed:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "AutoWash",
"name": "Deepshine Mobile Detailing",
"description": "Mobile car detailing and paint correction across metro Perth.",
"telephone": "+61 8 XXXX XXXX",
"url": "https://deepshine.example.com.au",
"areaServed": { "@type": "City", "name": "Perth" },
"address": {
"@type": "PostalAddress",
"addressLocality": "Osborne Park",
"addressRegion": "WA",
"addressCountry": "AU"
},
"openingHoursSpecification": {
"@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
"opens": "07:00", "closes": "17:00"
},
"priceRange": "$80–$700",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9", "reviewCount": "180"
},
"review": [{
"@type": "Review",
"author": { "@type": "Person", "name": "Real customer" },
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"reviewBody": "Pulled from the live Google Business Profile feed."
}]
}
</script>Plus suburb-level service pages for the highest-intent corridors, GBP posts fed from completed jobs, and before/after photo schema on real work.
What changes for the real client
Their paint, their photos: the procedural car swaps for before/after galleries of real corrections. The booking form posts to their calendar — for detailers that's Urable or Squeegee, or ServiceM8/Tradify where they run a broader mobile operation — with SMS confirmation and a deposit link for correction bookings. Reviews pull live from their Google Business Profile. The Panel Board stays: it is the quote calculator their competitors make you call for.
Techniques
- Parametric SVG geometry — one builder, four vehicles, panels as closed paths reused for clip, highlight, swirl fill and tick anchors.
- Clip-path gloss sweep — a skewX(-14°) gradient band clipped to the covered-panel union; opacity floor 0.55.
- Pattern-fill swirl + two-pass fade for correction; rotating buffing head on a transform.
- Token-guarded rAF loop — zero-clamped delta, hidden-tab pause, reduced-motion static frame.
- No libraries — the page is a single self-contained HTML file; system-level guards (
[hidden]important, focus-visible, v-flag-safe patterns) per the collection playbook.