01Case study · Website
Auto Detailing & PPF Flagship
A seven-page site for a paint protection and ceramic studio: a 3D car to turn and repaint, a coverage switcher, a tint shade previewer and a three-step booking request.
Offered asBusiness website
01The brief
A considered purchase deserves a site that shows it.
Paint protection film, ceramic coating and window tint are researched purchases. Before anyone books, they want to know which panels a package covers, how dark a shade really is, and when the shop can take the car.
Most detailing sites answer with a gallery and a phone number. This one answers each question with something to try: turn the car, switch the coverage, slide the tint, then send a booking request that already says what the car needs.
It was built first for AZ Detailers, a paint protection and ceramic studio in Phoenix. The same build is ready for any studio that sells high-ticket protection work.
02Try it
Three controls, rebuilt for this page.
Small re-creations of the build's own controls, with the same packages, shades and steps. The real site draws them on renders of its 3D car; these are line drawings, so this page stays light.
Coverage switcher
Pick a package and the film lands on the panels it covers, from above and from the side, with the panels listed beneath. No sales call needed to explain what "track pack" means.
Paint protection film · coverage
Partial front
The impact zone. The film's edge sits across the hood.
- Front bumper
- First 18 to 24 in (45 to 60 cm) of the hood
- First 18 to 24 in of the front fenders
- Mirror caps
- Headlights
Full front
No line across the hood: the whole front, edge to edge.
- Front bumper
- Full hood
- Full front fenders
- Mirror caps
- Headlights
Track pack
Full front, plus everything a tyre throws at.
- Everything in the full front
- Rocker panels
- Behind the rear wheels
- A-pillars and the leading edge of the roof
Full body
The whole car, so no edge of film is ever in sight.
- Every painted panel
- Door jambs and edges where the panel allows
- Headlights and mirror caps
Film
Tint shade previewer
Slide each window's shade and watch the cabin disappear behind it. The build flags any front shade darker than the state allows; this one is set for Arizona, as AZ Detailers' is.
Window tint · shade
Front 35%Rear 20%
In Arizona, film on the front side windows must let through at least 33% of the light. 35% is within it. Behind the driver there is no shade limit.
- UV blocked
- 99%
- Infrared heat rejected
- 40 to 60%
- Infrared heat rejected
- 80 to 95%
- Phone and GPS
- No interference
Shades are visible light transmission: the lower the number, the darker the glass. Film figures are typical for the class, not one brand's specification.
Three-step booking request
The vehicle, the services, then a day. Each step is checked before the next, so the shop gets a request it can price, not a "call me".
Booking request · three steps
- 1Vehicle
- 2Services
- 3Day
Step through it with JavaScript on. The real build asks for a name and number on the last step; this demo doesn't.
03Seven pages
Seven pages, one file of facts.
Everything on the site comes from one brief about the business, with a source noted for every fact: its own website, its Google listing and what the owner says. Change the brief and the whole site rebuilds in seconds.
- 01
Home
The name over a 3D car the visitor can turn and repaint, the services with their prices, a before and after, Google reviews, hours with a live "Open now" sign, a map, and buttons to call, text and book.
- 02
Services
Each service in depth: what's included, the packages and their prices, the coverage switcher, a ceramic durability scale and the tint previewer.
- 03
Work
The shop's own photographs, filtered by service, opening full screen with the keyboard or a swipe.
- 04
Book
Vehicle, services, then the customer's details and an open day. The request reaches the shop by email, and the shop confirms.
- 05
Privacy
Plain English, written from what the site actually does with a booking request.
- 06
Terms
Plain English as well. Either legal page can be switched off with one setting.
- 07
Not found
A page for wrong addresses, in the same design, with the way back to the rest of the site.
04How it's built
A compiler that refuses to guess
- Client brief
- One file of facts about the business, each with its source. A brief with anything left to fill in doesn't build.
- Compiler
- Python. It merges the brief over the studio's catalogue of services, renders seven HTML templates and checks its own output: nothing left unfilled, every link and image resolving, one main heading a page.
- Images
- Turned upright, location data stripped, saved as WebP at 640, 1280 and 1920 pixels, and cached, so a rebuild takes about two seconds.
- 3D showroom
- three.js, the only bundled script. It loads where the device can run it. With reduced motion, without WebGL or with data saving on, the visitor gets a still image of the same car.
- Structured data
- The business, its FAQ, its prices and its breadcrumbs as JSON-LD, written from the same brief.
- Booking
- A form service emails each request to the shop. The site never takes payment and never confirms a booking on its own.
What it won't do
Show a price the owner hasn't confirmed, label a testimonial from the shop's own site as a Google review, or show opening hours nobody gave it.
05Measured
Measured, not promised.
| Page | Desktop LCP | Phone LCP | Code, gzipped | Everything loaded |
|---|---|---|---|---|
| Home | 0.69 s | 3.16 s | 40.8 kB | 2.9 MB, with the 3D car |
| Services | 0.73 s | 3.91 s | 39.8 kB | 0.65 MB |
| Work | 0.84 s | 3.99 s | 33.9 kB | 1.4 MB |
| Book | 0.61 s | 2.78 s | 33.8 kB | 0.79 MB |
Each of these pages shows its main content in under a second on a desktop. On a simulated mid-range phone over slow 4G it takes 2.8 to 4 seconds, and the home page brings the 3D car (1.4 MB compressed) to the devices that can run it. That is the next thing to trim.
- Browser QA
- 30 page runs
- Checks
- 241, 0 failed
- Widths
- 375 to 1920 px
- Console errors
- 0
Lighthouse 12 on the preview build, 23 October 2026: its desktop preset, and its default mobile run (simulated slow 4G, a processor four times slower). LCP is the moment the largest thing on screen has painted. The browser QA ran every page at 375, 768, 1280 and 1920 px wide, with every control exercised and reduced motion checked.
06Status
Where it stands
A preview built for AZ Detailers. It goes live when the owner signs it off; until then search engines are asked not to index it and its booking form doesn't send. The same build is ready for other paint protection, ceramic and tint studios.
Want one for your studio?
The same build with your services, prices, photographs and hours. Start with the website, and add booking reminders or a missed-call responder when you want them.