A mobile-first WebGL arcade game for Gucci. Built to launch the Gucci Basket sneaker with a vintage game vibe, bold Memphis-inspired visuals, and real level-based gameplay.

Client: Gucci
Agency: Superhero Cheesecake
Project type: WebGL Browser Game
Role: Development
Timeline: 4 weeks
Date: 2021
Recognition: Awwwards Site of the Day, Developer Awwwards, FWA Site of the Day

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.

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.

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.

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.

Interested in working together? Send a message to info@petercoolen.com.