Responses by Resn Amsterdam

Background: The website is part of adidas’s latest innovative campaign, Futurecraft:Loop, which targets global influencers to beta a program that introduces a 100 percent recyclable performance running shoe. The site educates the wider public on this proposed circular economy and utilizes the closed loop idea of recycling throughout all sections and interactions.

Favorite details: We designed the site as a visual metaphor for the journey of thermoplastic polyurethane (TPU), the singular building block of the Futurecraft:Loop shoe. TPU is represented at all stages as particle effects that constantly transform from one state to another. We liked how this turned out.

Challenges: Other than a tricky project timeline that saw exploration and prototyping normally reserved for preproduction happening during production sprints, the site’s most challenging aspect was the navigation through all the sections of the page. We wanted to convey constant progress that finished at the start, with intuitive, responsive, user-input driven animations all along the way. Gluing that together required nuance and finesse right up to the wire. Another challenge was to make the shoe look convincing in real-time 3-D, mainly because of the transparent elements in its fabrication. And while real-time 3-D graphics are our bread and butter, it turns out 3-D transparent elements are no cakewalk. We’d have tackled that a bit earlier in the project if we’d known!

Navigation design: Since the campaign focuses on recycling, we created an infinitely scrolling website that circles the user back to the beginning. Despite each section of the story being on a different layer with unique interactions, there is always a consistent element—whether that was the animated particles or the big text panning—throughout the site that ensures that users feel in control of their journey.

Technology: For various creative reasons we had to render all the text in WebGL, which posed an interesting challenge as the Loop was a worldwide campaign. We had a lot of different character sets to support, so we used MSDF fonts—a great technique, although not as straightforward as HTML text. To create the front-end experience, we heavily relied on three.js and the Greensock Animation Platform on top of our own in-house-built technology stack. We used Cinema 4D for work on the shoe model.