PepsiCoDigital

Mountain Dew Rise

An amped-up e-commerce launch for Mountain Dew’s new morning energy drink.
Launch Site

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 Rise’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 for Rise!

Credits

  • Laundry Serivice
drag