Moncler The City of Genius

Award-winning immersive experience

01 · The Challenge

Moncler's City of Genius was a physical event in Shanghai — fashion designers and cultural collaborators, their names literally on the buildings of a metaphorical futuristic city. The ask was to bring that city online: a 3D immersive web experience that captured the scale and visual language of the event for an audience who wasn't there.

The sold vision was a Blender render. Photorealistic glass buildings, reflective water, dynamic lighting. The question was how much of that vision a browser could honour — and what it would take to find out.

02 · The System

The PlayCanvas scene with all buildings lit, showing the full spatial configuration.

PlayCanvas was the runtime environment — chosen for its game engine-like asset and scripting architecture, which made managing a scene of 8–10 distinct glass buildings tractable in a web context.

The frontend handled swipe and button navigation between buildings, with each building lighting up in sequence. A React-like component approach managed building states — which lights were on, which reflections were active, which names were visible.

An interaction layer of swipe behaviour, momentum, and choreography was prototyped iteratively in collaboration with R/GA Global Creative Director Kyle Wheeler.

The scene wasn't static across the campaign. Each collaborator had a scheduled release, and each release required its own spatial configuration — nine scenes in total, with buildings repositioned and camera angles manually set.

03 · The Decisions

The central problem was reflections. The Blender render showed glass buildings reflecting each other — neighbouring structures, lighting states, the names on the facades. That visual expectation was set.

A custom implementation used cameras positioned to capture reflected views as cubemaps, mapped onto adjacent glass surfaces. With lights toggling during navigation, reflected content had to update per neighbour states — a dynamic reflection system running within browser constraints.

The decision wasn't whether to do this — the visual expectation was already committed. It was how to do it within the thermal and performance constraints of a browser running on consumer hardware, without the experience degrading or crashing on device.

04 · The Complexity

The interaction design was largely undefined in the Figma. The visual design was complete; how the scene would respond to user input was not.

I prototyped several approaches and recommended momentum-based swiping with each building briefly lighting up in proportion to the movement curve. The answer wasn't in the brief — it had to be discovered through building.

The project began as a prototype and became the production website.

The nine-scene requirement came in late, closer to deployment — each collaborator release needing its own spatial configuration. This turned a single-scene delivery into a campaign-long commitment.

05 · The Evidence

A walkthrough of the final experience — building navigation, lighting states, and reflections.

Blender render vs. final website — the browser output held up against the pre-rendered vision that sold the project.

All buildings activated during navigation.

06 · My Contribution

Technical lead on the web experience. Chose PlayCanvas as the runtime environment and built the interactive scene — asset integration, lighting state management, the custom reflection implementation, and the swipe interaction system.

Worked directly with Kyle Wheeler on interaction design and with Eddie Vlagea on Moncler deployment integration.

Composed and manually set camera angles for nine distinct scene configurations, each tied to a scheduled collaborator release.

Winner of Campaign's The List No. 1 Customer Experience of 2024, Campaign Tech Awards 2025. Nominated for Webby Awards 2025.

Collaborators

Moncler x R/GA: Kyle Wheeler, Eddie Vlagea