Mission
Retap products are the work of three Danish enthusiasts who dream of making the world a better place by helping people reduce plastic in their daily lives. In 2009, they came together and tried to invent the world's best glass water bottle - material, shape, technology, ecology. One year and many designs later, in the summer of 2010, Retap Bottle was released.
It looks very much like a drop of water and has deservedly won several world awards for design and ecology - The Red Dot Design Award and Promotional Gift Award in 2011, as well as the Good Design Award in 2012, and the ECO SCANDINAVIAN AWARD.
We believe that with its elegance, sophistication, and innovation, the Retap bottle deserves a proper online presence.
The process
We have created a Landing page where, interactively and with the help of 3D models of the products, you can view your bottle, customize it, and order.
We have made it possible for consumers to change the color of their chosen cap or case in real-time and see what they would actually look like on the bottle. Of course, the colors are indicative.
We have optimized the whole process in a few steps:
1. Choice of bottle size (0.300l, 0.500l, 0.800l)
2. Choose the color of the free cap
3. Option to add a case and choose its color
4. Review the order
5. Complete the order
Throughout the experience of creating their Retap bottle, users have the opportunity to learn more about the product and its accessories by hovering over hover fields.
In the last step of the product configuration, it is possibleto view the bottle at 360 °.
Once you have created the perfect bottle for yourself, you can go to the "Complete Order" button, which takes you directly to the Retap website, where you can buy it.
Challenges we faced in the process of work
One of the challenges we faced was to make the 3D model of the bottle realistic enough, but also optimized so as not to negatively affect the speed of the site. We tried a lot of options until we achieved a balance between speed and realism, especially when we keep in mind that the site should work perfectly on mobile devices without difficulty.
Interesting facts
The animations of the 3D model happen entirely with GSAP and Scrolltrigger, which gives us complete control over what happens to the individual resolutions.
The reflections on the bottle are achieved with the so-called Cube map for Three.js. These are 8 photos arranged in a box that emits natural light. This avoids the use of heavy artificial lights that Three.js offers.
The colors of each cap and case always flow from the old color to the new one chosen. This approach gives a much more complete look when changing the color.
