Nine concentrated detailing formulas, blended in Wales and sold direct. I designed and built all of it: a storefront where a 3D GT3 gets washed as you scroll, plus accounts, a partner programme that pays commission monthly, trade pricing, a twelve-section admin dashboard and the emails that run the business in the background.
Recorded from wdtwerks.co.uk1920 × 1080 · scroll-driven three.js
(01) — Overview
WDT Werks sells to people who read the back of the bottle, so the site had to be as exact as the chemistry and as satisfying as a clean car. The homepage is a scroll-driven 3D story: a dirty GT3 rolls in, and each of the nine formulas takes its turn until it leaves spotless.
Behind the storefront is a business system. Stripe takes payment, Vercel Functions handle orders, stock, reviews, partners and trade, Resend sends the email, and the owner runs everything from one dashboard: packing orders, paying partners, approving reviews and editing products.
(02) — The real homepage, scrubbed by your scroll
The range opens the page. Scroll, and a road-dirty GT3 rolls into a dark studio.
Road film loses its grip before contact. The bottle flies in with three proof figures.
A dense blanket that stays where it lands.
Lubricity that carries grit clear.
Brake dust released from every spoke.
Fast gloss and water beading in 60 seconds.
Tough ceramic protection that lasts.
A fresh gloss top-up, every time.
Nothing left but glass.
The factory finish, restored. Nine formulas, one system.
three.js renders a compressed GT3 model (meshopt GLB) lit by a studio environment. Dirt, foam, beading and gloss are shader states the scroll drives between.
Each chapter is a record: product, effect, command word, proof line and timing (arrival, hold, handoff, effect, result, exit). Adding a product means adding a record.
Handsets play pre-rendered films of the same scene, forward and reverse for every chapter, so the story plays in full without asking a phone to run WebGL.
On desktop, each wheel, touch or key press plays one chapter. That keeps the pacing deliberate, and there's a scrub mode for demos and QA.
(03) — Signature moments
These are recordings of the live site. None of them are mock-ups or motion comps: every clip is the real page responding to a real cursor or scroll.
Each 100ml bottle is its own SVG artwork, loaded inline so the cap and pump can move. Point at one and the cap flips, the pump presses and a canvas mist sprays in the bottle's colour. On phones one bottle sprays by itself as the row scrolls into view.
A canvas rain simulation on a black panel. The bare half sheets and drips; the half treated with the Protection System beads and sheds. The panel tilts up as you scroll, and it only runs while it's on screen.
One bottle becomes the whole range, receding to a vanishing point, driven by a CSS scroll timeline with a JavaScript fallback. It's the pitch for the partner programme, told in one image.
The brand story ends on concentration, so bubbles rise past SUDZ and its colour builds while the section holds the screen.
(04) — The range
The bottle artwork is part of the build too: vector originals for the site, raster sets for phones and email, and masks the hero uses to light each bottle in its own colour.
(05) — On a phone
Recorded at iPhone size. The hero plays its pre-rendered films, the Wash Shots spray by themselves, and the catalogue reflows into a single hand's reach.
(06) — Behind the counter
The owner's side of the shop, running the real dashboard code in a browser with sample data. It walks through its sections on its own; pick any to jump there.
Revenue, orders and average order against last month, and a "Needs you" list: orders to send, commission due, applications and reviews waiting, and whether the banner is live.
All-time totals, revenue by month in a hand-built SVG chart, a year-by-year table, and best sellers for all time, the year or the month.
To send, backorders, sent and all, with a chip for every discount code and a search across names, towns and references. A packing sheet prints in one click.
The address, the packing list, anything on backorder, and a ship form. Marking it sent emails tracking to the customer and schedules their review request for a week later.
Approve or decline applications, then see each partner's codes, sales, current rate and how far they are from the next one.
Everyone owed commission this month, with their payout details and one button to record the payment. Commission only clears once an order is safely past returns.
Every commission payment on record, with its reference and the orders it covered. It's the same receipt the partner gets, with a CSV attached.
Publish, edit or take down reviews. Write one for an in-person sale, or copy a customer's personal review link to send them.
Percentage or fixed codes with minimum spend, usage limits and expiry, switched off in one click. Partner codes live here too.
Invite garages and valeters, set discount bands by order value, and revoke or restore access. The bag and checkout apply trade prices automatically.
Write the message, attach a code or link, choose the tone, and check it in live desktop and phone previews before it goes up.
Every product in every size: counted or not, stock level, warning level and backorder, with lead times the site quotes to customers.
Every product with its artwork, sizes and prices, edited in place without touching code.
Partners get their own dashboard: sales made, their rate, cleared and settling commission, a progress bar to the next rate, and their codes.
How they're paid, every payment with its receipt, and every sale their codes brought in.
Real dashboard code · sample data · no customer information shown
(07) — The emails that run themselves
Every email is built from the same template code and sent through Resend: order and despatch updates for customers, packing alerts for the owner, and a complete partner lifecycle. These are rendered from the real templates with sample data.
The customer gets their reference; the workshop gets a packing email that flags anything the order just ran low on.
Tracking goes out the moment the owner marks an order sent from the dashboard.
Scheduled at despatch, with a signed personal link that lasts 60 days. It's cancelled automatically if the order is un-sent.
Once the owner approves a review, it publishes to the product pages, and the stars are added as structured data for search.
One button records the payment, and each partner gets a receipt with a CSV of every order that earned them commission.
(08) — How it's put together
Hand-written pages and ES modules on the front, small Vercel Functions behind, and managed services for money, mail and storage. Hover or tap a node.
Swipe the diagram sideways to see all of it →
(09) — Under the bonnet
A tiny inline script classifies handheld devices before anything renders, so phones never flash the desktop layout.
The first bottle is preloaded with fetchpriority="high", split by media query: SVG for desktop, responsive AVIF for phones.
Review and sign-in links carry HMAC-signed tokens with an expiry, so there are no passwords to leak and no link works forever.
Partner earnings move from settling to cleared to paid on a schedule, so nobody is paid for an order that comes back.
Counted lines stop selling at zero; backorder lines keep selling with an honest lead time, and the despatch email splits the parcel accordingly.
A build script rewrites each page's SEO block from the data on every deploy, with guard rails around anything that must survive a rebuild.
Inter is split by unicode-range, so browsers only download the glyphs a page uses.
The same engine powers the sister shop, re-themed from red to yellow, with separate Stripe, storage and secrets.
(10) — Try it
Load the live site inside this page and use it: open a product, add a bag, read a guide.
WDT Design
