Mountain Dew Energy
Rise and shine
Mountain Dew wanted to launch their new mental-boosting, immune-supporting, no-sugar-added morning beverage with a bang, so we created a dynamic, kinetic and shoppable web experience. Working with agency partners Laundry Service, who provided a design inspired by Moutain Dew Energy's bright and bold packaging, we brought the cans and flavors to life in a smooth-scrolling WebGL site that is always in motion.
The tech
We kept load times low with web-friendly GLTF file formats for the 3D elements, which were imported and rendered using Three.js. The lively halftone drop-shadow effect behind each can employed a custom post-processing pass with bespoke shaders. We used Nuxt.js to produce an SEO-friendly framework that integrates the WebGL portions of the site and connects with Pepsi’s e-commerce platform. The site uses a GraphQL API and Vue.js components to deliver a custom shopping experience before passing shoppers off to a smooth checkout.
Outcome
The site launched with fanfare when LeBron James announced the release to his millions of Twitter and Instagram followers just before All-Star Weekend. As site views and sales tick up, the future looks bright!