Beyond the Spec Sheet: Three Web Experiences We Engineered for Xiaomi
- Jun 24
- 4 min read
From an interactive 3D teardown to a million-hit launch portal to a 60 FPS browser racing game — three Xiaomi campaigns, three completely different engineering problems, one studio.
In consumer tech, the product is the story. A spec sheet can list a brighter display, a faster chip, a longer-reaching zoom — but a list doesn't make anyone feel the difference. That's the gap Xiaomi asked us to close.
Over our last three projects with the Xiaomi team, we didn't reuse a single template. Each device had its own personality and each campaign had its own job to do, so each one got its own build — moving from real-time 3D product showcases, to a high-traffic registration engine, to full browser-based gaming. Same studio, three very different muscles.
Here's a look inside how we brought three Xiaomi campaigns to life on the web.
The Xiaomi campaign matrix, at a glance
Project | Campaign goal | Core tech | The experience hook | The result |
Redmi Note 15 | Show off new hardware | Three.js real-time 3D | A self-guided, interactive product teardown | 200,000+ experiences played |
Xiaomi 17T — Switch Dare | Drive multi-city signups | High-scale UI + edge delivery | "India's Zoom Test" — a city-aware challenge | 1M+ hits · 10,000+ registrations · 4 cities |
Redmi Turbo 5 | Make speed felt | Three.js gamification | A 60 FPS browser racing game | 250,000+ plays in one week |
1. Redmi Note 15 — Putting the phone in the user's hands, in 3D
The brief: make new hardware feel tangible through a screen the size of a palm.
Static product photos tell you a phone exists. They don't let you turn it over, look closer, or understand why a component matters. For the Redmi Note 15, we wanted users to explore the device the way they would in a store — by picking it up.
The build: a lightweight Three.js experience that drops a real-time 3D model of the phone directly into the browser. No app, no download — it loads fast and runs smoothly, even on the mid-range Android devices most of the audience is actually holding. Getting a detailed model to feel premium and stay performant on mobile is the hard part, and it's where the real engineering went: optimized geometry, compressed assets, and a render loop tuned to keep interaction buttery.
The moment: as users scroll and drag, the phone rotates seamlessly, and interactive hotspots open up the features that matter — the camera system, the display, the build. It turns a passive scroll into a self-guided teardown the user controls.
The result: over 200,000 people picked up the phone, explored it, and claimed a reward — an audience that didn't just see the Redmi Note 15, they handled it.
2. Xiaomi 17T "Switch Dare" — Engineering for the rush
The brief: turn the 17T's standout zoom camera into a multi-city event, and be ready when everyone shows up at once.
"Switch Dare — India's Zoom Test" was built around the thing the 17T does best: reach. The campaign dared users across the country to put that zoom to the test and sign up for the event near them. The creative challenge was attention; the engineering challenge was scale. A launch like this doesn't get traffic evenly — it gets it in spikes, all at the same moment, from everywhere.
The build: this one wasn't about graphics. It was about flawless execution under load. We engineered a fast, responsive registration portal delivered from the edge — so a user in one city gets the same instant, sub-second experience as a user a thousand kilometers away. The interface adapts to the user's city, surfaces the relevant slots, and captures registrations cleanly without dropping a beat when traffic surges.
The moment: a localized, dynamic flow that recognizes where you are and shows you your event — real availability, no friction, no lag, no spinning loaders during peak rush.
The result: the site took over a million hits and converted 10,000+ registrations across 4 cities — a launch that stayed up, stayed fast, and stayed on-brand exactly when it mattered most.
3. Redmi Turbo 5 — Making speed something you can feel
The brief: the Turbo 5's whole identity is performance. A page that talks about speed would have undercut the point. We had to make people feel it.
The build: so we turned the browser into a racetrack. A full 3D racing game, built entirely on Three.js, running in-page — no install, just play. The hard requirement was a locked 60 FPS, on mobile browsers, with zero compromise on feel. That meant ruthless asset optimization, smart loading so the track is ready before the player is, and lighting pulled straight from the phone's own design language so the game and the product felt like one thing.
The moment: responsive controls, vibrant motion, and frame rates that never stutter — the on-screen adrenaline mirroring the "ready when you are" promise of the device itself.
The result: 250,000+ plays in a single week — a quarter of a million people who experienced the Turbo 5's speed by living it, not reading about it.
What building for Xiaomi taught us
Three campaigns, three different answers — and that's the point. A web experience shouldn't just adapt to screens; it should adapt to the story of the product. The elegance of real-time 3D, the reliability of a high-traffic launch engine, the pure fun of a browser game — none of these is the "right" approach on its own. The right stack is the one that serves the campaign's true pulse.
That range is what we bring to the table: the creative instinct to find a product's story, and the engineering depth to ship it — fast, performant, and at scale — for a global brand.
Have a launch that deserves more than a landing page? Let's talk.
Comments