Case 04 / 05 Auto workshop · Austin, TX Service business · 6 pages
Apex Motorworks
A premium independent workshop in Austin — six pages, a five-step booking configurator and before/after case files. Not one stock photo: every image and both films are rendered in code.
- Role
- Direction, design, build
- Pages
- 6
- Dependencies
- None
- Stack
- HTML · CSS · Vanilla JS
01 — Overview
A workshop that shows its working
Apex Motorworks is a demonstration brand — the workshop, the team and the case files are placeholders, and its own README lists everything to replace before launch. The build is real: a home page, services with eight disciplines and starting prices, case files with before/after comparisons, an about page, a five-step booking configurator and a contact page.
The brief was a workshop site that earns trust the way a good mechanic does: measure first, explain clearly, and show the evidence.
02 — Design direction
Black, bone and one amber signal
The palette is the workshop floor at night. Archivo, a variable face set wide and uppercase, carries the engineered display type; IBM Plex Mono handles the readouts; and Instrument Serif, in italic, is kept as the human accent inside the machine.
Black #0A0A0B · Graphite #16171A
The ground — a near-black rather than pure black.
Bone #ECE8E1
The type colour — warm rather than a stark screen white.
Amber #D27B3E
The signal colour, kept for live readouts and the one thing on screen to look at.
03 — Key features
Diagnose, explain, then book
A five-step booking configurator
Vehicle, service, details, date and confirmation, with a running summary beside every step. Only the vehicle and service choices are kept in the session — contact details never are.
Before and after that a keyboard can drive
The comparison slider is a real range input with tap-to-position, so it works with arrow keys, a mouse or a thumb.
An interactive vehicle-systems drawing
Generated from the same car geometry as the film, so the illustration and the footage always match.
Eight service disciplines
Brakes, climate, diagnostics, electrical, engine, performance, suspension and transmission — each with its own section and rendered imagery on the services page.
Forms that do not pretend
Booking and contact validate in the browser and post to a configurable endpoint. Until one is connected, submission is simulated, and the README says so plainly.
04 — Technology
Every frame rendered in code
There is no stock photography. A Node and ffmpeg pipeline renders the black GT in its studio, macro studies of a rotor, gears, a coilover, a cooling fan, an ECU board, an oscilloscope and a tachometer — and both films.
A hero film under 600 KB
About 575 KB on desktop and 250 KB on phones. Images ship as WebP with srcset and load lazily below the fold.
One loop, switched off when idle
Animation uses transform and opacity only, from a single requestAnimationFrame loop gated by IntersectionObserver. Videos pause off-screen.
Search-ready from the first page
AutoRepair local-business, offer catalogue, FAQ, breadcrumb and service structured data, canonical URLs and a sitemap.
Controls for everyone
A skip link, 2 px focus rings, roving tabindex on the tab lists, pause controls for the films and the testimonial carousel, and a reduced-motion path with no intro, pinning or autoplay.
05 — Visual showcase
06 — Responsive
The same workshop on a phone
Breakpoints at 1280, 1024, 767 and 420, with separate touch and reduced-motion layers. On phones the hero film swaps to its lighter 720 × 1280 portrait cut — about 250 KB.
07 — Note
Apex Motorworks is a demonstration brand. Its address, phone number (a reserved fictional one), team, testimonials, review score and case files are placeholders to replace with real ones before launch.