KODE Immersive fuses AR, VR, real-time 3D, and spatial computing to craft high-impact, interactive experiences. It’s not only a platform – it’s a portal. Designed to ignite emotion, shatter expectations, and redefine digital engagement.
Our problem? To convey this pioneering imaginative and prescient to life, not simply by explaining what KODE Immersive is, however by making guests expertise what it’s prefer to be inside it.
Background
Our relationship with KODE started in 2022 after we prolonged their model identification and reimagined their digital dwelling. What began as a model refresh shortly developed right into a artistic partnership rooted in shared values and a mutual obsession with crafted model expertise and exquisite design.
In late 2024, KODE approached us with a brand new enterprise. This time, they had been diving headfirst into rising applied sciences (AI, WebXR, and real-time 3D) to broaden their service providing. We knew instantly, this was the sort of mission you dream about. It was a well timed alternative and bought us excited to push boundaries.
The Transient
The temporary was as open because it will get. Past a number of core aims (particularly, price range and timeline), there have been no strict constraints. We acquired a three-slide deck: a reputation, a positioning assertion, three model pillars (CREATE, IDEATE, DELIVER), and some straplines.
No case research. No visible identification. Only a daring imaginative and prescient.
And that freedom turned our best asset. We constructed every part from scratch, visible language, tone, interactions, whereas staying conscious of price range and pace. Our strategy: transfer quick, iterate usually, and push boundaries.
To tug it off, we adopted a phased R&D course of. We teamed up with the sensible Francesco Michelini (who beforehand helped construct the Malvah web site). Francesco lives and breathes WebGL. He as soon as spent every week refining a mechanic we had already agreed to desert, simply because he couldn’t settle for defeat. That sort of drive made him the right collaborator.
Our Course of
We used KODE Immersive as a dwell testing floor for our refined four-phase course of, aimed toward delivering the very best artistic options whereas avoiding pointless suggestions loops. Right here’s the way it formed the ultimate consequence.
01 Uncover
We kicked issues off with an in-depth technique session the place we unpacked the temporary, explored ideas, mentioned rivals, and mapped out technical prospects. Model tiles helped kind the muse of our visible language.
Typography was the important thing differentiator. We knew the appropriate typeface would talk innovation and intent. After a number of rounds, we landed on Brut by Off-Kind – an unconventional mono-inspired kind that struck simply the appropriate steadiness of construction and rigidity.
Color took cues from the father or mother model, however we flipped the hierarchy. Orange turned the dominant tone, with daring black moments layered all through. Acquainted, but distinctive.
Iconography developed from KODE’s chevron mark. We repurposed it as a modular, dynamic system to information interactions and replicate the model’s three core pillars.
02 Create
This part turned attention-grabbing, because the expertise would rely closely on person interplay, this part was pushed extra by prototyping than conventional design. We labored in tight, iterative loops with the shopper, throughout design, 3D, and growth to check feasibility early and sometimes. It turned an it was extraordinarily natural course of and very best to achieve the deadline whereas stretching limitations.
From the beginning, we knew we didn’t simply need customers to work together—we needed them to really feel immersed. To lose observe of time by being emotionally and mentally engaged.
We developed a spread of 3D ideas in Cinema 4D and funnelled them by R&D cycles. The method required a whole lot of iterating and relooking artistic options, however was at all times collaborative – and in the end, important for innovation.
03 Craft
That is the place the magic occurs.
Our craft is what we think about our particular sauce at Malvah – that is the place we prefer to push, refine, and design with intent and readability. It’s laborious to not get misplaced within the sauce. Large respect for Francesco throughout this part as it’s the most intense when it comes to iterations, from shader logic to ambient lighting to the haptic high quality of cursor interactions, and each element was constructed to really feel immersive but easy. Fortunately, Francesco is an precise residing wizard and offered us with testing environments the place we might craft all these parts seamlessly.
Nonetheless, one thing was lacking! The high-fidelity 3D was clashing with the flat backgrounds. The repair? A refined layer of pixel distortion and comfortable noise texture. Minimal, however transformative. All of a sudden, the entire expertise felt unified – like every part belonged as one unified, harmonious expertise.
04 Ship
By last QA, many of the heavy lifting was accomplished. We stress-tested efficiency throughout browsers, units, and connection speeds. We refined micro-interactions and polished particulars based mostly on early person suggestions.
Tech Stack
Nerd stuff alert.
From the outset, this was at all times going to be a Three.js and WebGL mission – not for the novelty, however for the storytelling energy. Actual-time 3D allow us to flip a static model right into a residing, respiratory expertise. We used Cinema 4D for concepting and prototyping, from early ideation by to last modelling and meta-cap creation.
One of the crucial impactful efficiency optimisations got here by the usage of BatchedMesh, which enabled us to attract a number of meshes sharing the identical materials in a single draw name. Since draw calls are among the many costliest operations in WebGL, this dramatically improved effectivity, lowering calls from 40 or 50 right down to only one. You’ll see this in motion in each the hero part and the footer, the place we additionally carried out the Rapier physics engine for dynamic interplay.
The true breakthrough, nevertheless, was shifting the rendering of our most resource-intensive canvases to an OffscreenCanvas, with all associated logic dealt with inside a WebWorker. This shift occurred later within the mission and required important transforming, however the good points in efficiency and responsiveness had been plain. It was a technically bold transfer, however one which paid off.
Options
The positioning follows a steady scroll narrative—a cautious dance between interactivity, emotion, and data. With the first aim to impress curiosity and invite deep engagement, rom high to backside, right here’s a rundown of our favorite options.
Chevron
We land on the hero of the model, the logo-mark. The chevron is the anchor, each actually and metaphorically. The driving drive behind the iconography that might funnel by the expertise. We needed the entry level to set the tone, daring, dynamic, and intuitive for the person to discover.
Shifting Textual content
A kind of completely happy accidents. Impressed by a line that didn’t make the ultimate copy, we developed a mechanic the place textual content splits and shifts because the cursor strikes. A metaphor for deconstruction and reformation – fluid, dynamic, alive.
Icons
A playful area to discover, uncover, and work together. Designed to echo the model’s chevron and embody its core pillars.
Menu
Certainly one of our favorite parts. It subverts the everyday UX sample by rising from the bottom and remodeling into the footer as customers scroll; a small disruption that makes a huge impact.
SFX
Sound is usually the unsung hero. We comply with the 80/20 rule right here, often known as the Pareto Precept —simply the correct quantity to amplify emotion with out overwhelming the expertise. From part transitions to hover suggestions, the layered soundscape provides depth and environment. The transition from the touchdown part to the providers has the person feeling as if they’re coming into a brand new realm.
We labored with Martin Leitner from Sounds Good to curate the sound parts in aiding the expertise and bringing the interplay with the 3D parts to life. This was such a fantastic expertise, and Martin’s enthusiasm helped drive the method and the crew’s pleasure.
Easter Egg
We at all times deliberate for an easter egg, we simply didn’t know what it was till it revealed itself.
A sketch mechanic, pulled from KODE’s visible identification, was built-in into the cursor. Customers can draw on the display to disclose a hidden layer; a playful nod to the analogue-digital duality of the model.
Early testers had been lacking it totally. So we added a refined auto-activation set off at simply the appropriate second. Downside solved.
Reflections
This mission reminded us that the very best outcomes usually emerge from ambiguity. No case research. No visible property. No roadmap. Simply imaginative and prescient and belief.
Whereas we’re happy with what we’ve delivered, we’ve solely scratched the floor. Part Two will introduce interactive case research and deeper storytelling. We’re particularly excited to discover a z-axis scroll journey by every service, bringing dimension and discovery to the following stage.For now, KODE Immersive is dwell.
And it’s solely getting began.
