A vintage runner with campaign-grade visuals, built in Three.js

Objective

A real game, not just a visual toy

Gucci wanted a new game concept to support the launch of the Gucci Basket sneaker. The brief gave wide creative freedom, but the experience still needed to land as a real game, not just a visual toy.

Success, for us, meant shipping a responsive, mobile-first game that felt immediate, ran smoothly, and supported multiple levels of play with a clear ramp in difficulty.

Approach

Aligned to the sneaker and the campaign world

The sneaker was inspired by basketball, so the gameplay leaned into that energy. At the same time, the wider campaign included a physical pop-up with bold Memphis-inspired decor, so we aligned the game's look and level palette to the campaign world. Each level keyed off a primary color from the sneaker variations.

Execution

A simple control model that stays readable at speed

We developed the core loop as an endless runner with discrete lanes and level-based tuning: you move fast, make quick decisions, and the game gets harder as you progress. The simplicity was the point. It lets art direction and motion do real work without hiding the gameplay.

Data-driven level design using spreadsheets

To move fast and keep the whole team involved, we built the obstacle system around level data authored in spreadsheets. Each sheet represented a level, with columns mapping to the three lanes and rows describing obstacle placement. We then pulled that data via a Google Sheets API workflow and transformed it into the in-game obstacle layout in Three.js. This made iteration practical without asking developers to hand-edit patterns every time.

Choosing the right rendering approach

We explored a 2D route first, including a canvas-style approach and Pixi.js. We also tested a "2.5D" isometric direction. In the end, we shipped with Three.js because it was the best fit for the visual ambition, the motion, and performance on mobile.

The pivot that saved the schedule

Early in development, we intended to keep objects flat inside a 3D world. A week and a half in, collisions and masking did not behave reliably, and the depth read was not convincing. We pivoted from 2.5D assets to full 3D objects. Because the objects were simple forms, we could rebuild them without blowing up performance, and we got a cleaner collision setup as a result.

Motion that plugs into the game, not recreated by hand

Instead of treating motion as a reference for developers to replicate, we used exported animation files directly in the game. That shifted iteration toward motion and reduced time spent re-implementing transitions. It also made the overall experience feel more consistent because the "source of truth" for movement lived in the animation output we consumed.

The Hyperboloid backdrop

We built the speed feeling with a dedicated background shape, called "The Hyperboloid," to create a warp-tunnel effect and give the game a strong sense of motion. It's one of those elements that is simple in concept, but it does a lot of heavy lifting for perceived velocity and vibe.

Quality and performance choices

This was a mobile-first WebGL game, so we treated performance as a feature. Three.js gave us enough headroom to keep the visuals playful while keeping the scene readable. The late pivot to full 3D also helped: fewer edge cases meant fewer hacks, and fewer hacks meant a more stable frame.

Result

Campaign-grade art direction with real, replayable gameplay

Gucci Burst shipped as a mobile-first WebGL game that balanced campaign-grade art direction with real, replayable gameplay—multiple levels, clear difficulty ramping, and a fast, responsive feel on mobile browsers.