MERIDIAN
A website where you build your own hypercar in 3D — pick the paint, wheels and details, and watch the car update live. Made to look and feel like a real car brand’s site.
Build a hypercar in your browser.
MERIDIAN is an original automotive brand and configurator built end-to-end by D-LAB. The site lets you choose one of four cars, then customise it — colour, wheels, interior, brakes — and see every change happen instantly on a 3D model you can spin around.
Brand, UI, 3D, and checkout flow were designed and built in-house — a production-quality portfolio case study built to sit alongside real manufacturer sites. MERIDIAN is one of four D-LAB portfolio projects — alongside Atlas, VEIL, and Keniye Platform.
Four cars, one builder.
Petrol, hybrid, and electric — four very different cars, all customised through the same simple flow.
Keeping it simple.
Expensive things feel calm and uncluttered. So I kept the design quiet — dark, lots of space, and one accent colour.
Settled on racing red.
I started with gold — it looked cheap. So I tried red, green, blue, chrome and more, side by side on the real screen. Red won. It’s the classic Italian-sportscar colour, and it just felt right.
A button, not a hamburger.
One button opens the menu in a circle on desktop and a tidy tray on phones. It’s a bit different, and it keeps the car as the star of the page.
The logo fills up as it loads.
No spinning wheel. The MERIDIAN logo fills with colour while the page loads — so the wait itself looks like part of the brand.
I cut my own ideas.
I had fancier concepts — animated reveals, smoke effects. They got in the way of the car, so I removed them. Knowing what to leave out was the hard part.
Making 3D run on a phone.
Showing a detailed 3D car in a web browser is hard. Keeping it smooth on a phone is harder. Here’s what I solved.
A 34MB car was too heavy.
The biggest car was way too large to load on mobile data. I compressed it down to about 11MB and made it load in the background, with a clear loading indicator so people know it’s coming.
The car looked blurry on phones.
Phone screens are very high-resolution, and the car was rendering too low. I tuned the quality so it’s crisp on a phone without draining the battery.
“Fast at first, then unusable.”
A tester said the site slowed to a crawl after a few minutes. That’s a classic memory leak — 3D leftovers piling up until the phone chokes. The fix is cleaning up properly after every change. I tracked it down by watching the memory climb in renderer.info.
Pausing what you can’t see.
When the car scrolls off-screen, there’s no point burning power drawing it. Pausing the 3D when it’s not visible keeps everything fast and cool.
Test it for real. Fix the real cause.
The most important habit: testing on an actual phone and Mac. That’s where the bugs that matter showed up.
The button you couldn’t press.
On phones, the “Reserve” button was accidentally hidden — so you could build a car but never buy it. You’d never catch this just reading the code; you catch it the moment you try to tap it.
Paint that stopped working.
Changing the colour worked fine — until you turned on a background scene, then it quietly broke. The only way to find it was to actually click through the flow like a real user.
Knowing what to leave alone.
A small mark kept appearing on the screen edge. Instead of deleting things blindly, I checked — and found it was just the phone’s own browser, not my site. Not touching it was the right call.
What this shows.
I can build a brand from nothing — logo, colours, layout — and make it feel premium and considered.
I can build real 3D on the web and make it fast and stable on real devices, not just on a fast laptop.
I think about the whole journey — from landing on the page to placing an order — not just how it looks.
I know what to cut, what to leave alone, and that the bugs worth fixing are the ones you find by actually using the thing.
Built end-to-end by d-lab.codes.
Design, brand, and 3D web — from the first idea to the finished site.
View live site← Back to all D-LAB experiments
Original brand and 3D configurator built by D-LAB as a portfolio showcase. Live demo available — not affiliated with any car manufacturer.