The project involved developing an interactive product launch website for Nike's Air Max 720, designed to showcase the shoe's versatility and durability through engaging digital experiences. Users could explore a detailed 3D model of the shoe in four different colorways and interact with dynamic "stress test" demonstrations including twist, inflate, and displacement effects that highlighted the product's flexible design.
Video ready
Keyboard shortcuts: Space or K to play/pause, Arrow keys to seek and adjust volume, M to mute, F for fullscreen

Details

Video ready
Keyboard shortcuts: Space or K to play/pause, Arrow keys to seek and adjust volume, M to mute, F for fullscreen

Mobile version of the showcase. One of the biggest challenges was serving the 3D model in a way that was performant on mobile devices, while still providing a rich interactive experience on all kinds of devices.

Instead of textures, we recreated the look of the shoe using a custom GLSL shader, which allowed us to achieve a high level of detail without the performance overhead of traditional textures.

This not only allowed us to scale the mesh up without losing quality, but also made it possible to create seamless transitions and animations between the different colors.

Video ready
Keyboard shortcuts: Space or K to play/pause, Arrow keys to seek and adjust volume, M to mute, F for fullscreen

We also produced teaser animations for social media and outdoor advertising.

Work in Progress and Prototypes

Video ready
Keyboard shortcuts: Space or K to play/pause, Arrow keys to seek and adjust volume, M to mute, F for fullscreen

Early prototype and proof of concept.

Video ready
Keyboard shortcuts: Space or K to play/pause, Arrow keys to seek and adjust volume, M to mute, F for fullscreen

Earlier iterations experimented with soft-body physics, but were ultimately not used in the final product. Mainly, because the bubbles played a less important role in the final design and were causing performance issues on low-end devices.

design & art direction:

  • Artur Neufeld

web development:

  • Artur Neufeld

GLSL shader development:

  • Jan F. Scheuer

Sound design:

  • Robert Dietz

3D modeling:

  • Pascal Wiemers

Video Editor:

  • Simon Villaret

Technologies used:

Vue 2, WebGL (Cables.js), Custom Shaders (GLSL), Howler.js