Case Study · Automotive Services
Falcon Mobile Tire Change
A Calgary mobile tire company that drives to the customer — so the website drives at you. The whole page is a scroll-controlled film: a service van approaches through a winter dusk, the job plays out in a driveway, and a wheel comes apart to label everything included. Booking runs through WhatsApp, with no backend to maintain.
The Challenge
Mobile tire service is a hard thing to show. There is no shop to photograph and no showroom to walk through — the entire proposition is that nothing happens at their place, it happens at yours. A stock-photo page of a tire on a white background says none of that.
So the site was built as a film you scroll. Every frame was generated for this brand, then converted into image sequences a canvas paints one frame at a time against your scroll position — the same technique Apple uses for product pages, running here on a static site with no video player, no framework and nothing to keep running.
Key Features
- Three scroll-scrubbed film acts — the van arrives, the job runs, the wheel comes apart
- Labelled callouts that point at real parts in the frame, not at fixed positions
- A coverage map built from actual tile data, with every town placed by its coordinates
- Booking form that composes a WhatsApp message instead of needing an inbox or a CRM
- Commercial section for semi trucks, trailers and fleet accounts
- Half-weight frame sets on phones — roughly 2 MB an act instead of 8 MB
- Local business schema with a 100 km GeoCircle service area
- Static site, no build step, deployed behind a Cloudflare tunnel
Act Two
The job, scrubbed frame by frame
Scrolling pushes the camera from the open van doors down to a torque wrench on the wheel, while four steps light up in time with the picture. This act started as a scrubbed video and had to be rebuilt: the clip carried a single keyframe, so every seek re-decoded from the start and the picture always lagged the copy. Converting it to an image sequence removed the lag entirely and behaves the same on iOS, where video scrubbing is worst.
Commercial
Semis, trailers and fleet accounts
Half the revenue is heavy duty, so the site says so early. A dedicated section covers yard and roadside work on semis, trailers, dumps and flat decks — steer, drive and trailer positions, scheduled fleet swaps, and per-unit invoicing — with imagery generated to match: a service truck working a trailer wheel in a yard at dusk, foothills on the horizon.
Act Three
A wheel that takes itself apart
The last act separates a wheel into its parts — tire, rim, brake disc, lug nuts, TPMS sensor — and labels each one with a leader line that points at the real part in the frame, mapped through the canvas transform rather than parked at a fixed position. A callout is not allowed to appear until the frame it points at has actually been painted, so a label can never describe something that isn't on screen yet.
A real map, not an illustration
“We cover 100 km” means nothing until someone can find their own town on it.
Built From Coordinates
The map is a grid of dark basemap tiles around Calgary, stitched and colour-graded to the brand. The 100 km ring, the pin, the radar sweep and every town label are drawn on top at positions calculated from real latitude and longitude through a Web Mercator projection — so Canmore sits in the mountains, Strathmore sits east, and a customer in Okotoks can see themselves inside the circle.
Readable On A Phone
On a narrow screen the smaller towns would collide into an unreadable cluster, so they drop out by class and the remaining labels stay legible — with the full town list carried underneath as chips. Basemap attribution stays printed in the corner, as the tile licence requires.
Booking
The form becomes a WhatsApp message
A one-van operation does not need a CRM, a mailbox to police, or a form that quietly fails into a spam folder. This form composes the booking as text and opens it in the customer's own WhatsApp, addressed to the business and already written out — name, phone, where the vehicle is, unit and plate, service, preferred time. They press send; the owner gets a normal chat and replies to confirm.
The three fields that actually matter drive a live counter and progress bar, turning green as they fill, and an amber light runs the border of the form the whole time. Nothing is stored in the browser and there is no tracking on the form.
Cinematic, but still static
Frames load through a small queue in priority order rather than all at once — firing every request together lets the connection split bandwidth evenly, so nothing finishes early and the frames the labels depend on arrive last. Phones get half-size sets, each act only starts loading once the one before it is done, and the whole film switches off for anyone who has asked their device to reduce motion.
Built for a roadside phone
Most of this traffic is someone standing beside a flat tire. A call bar is pinned to the bottom of every screen, the film runs at half weight, and each pinned overlay clears the bar instead of hiding under it.
Hero
Labelled wheel
Coverage map
One page, start to finish
Services grid
Commercial & fleet
What's included
Closing call to action
Nothing to keep running
Plain HTML, CSS and JavaScript — no framework, no build step, no database. It is served by nginx in a container behind a Cloudflare tunnel, with markup and styles set to never cache so edits are live on refresh, and the film frames cached hard for a year. Local business schema describes the service area as a 100 km circle around Calgary, and every claim on the page — no invented prices, response times or review scores — was left for the owner to confirm.
Want a Website That Actually Brings You Leads?
We build fast, search-ready websites that do more than sit there — instant quote tools, personal landing pages for every person on your team, and forms that feed straight into whatever system you already run on.