Coca-Cola

Coca-Cola x Marshmello

Website
CMS
Web Experience
client
  • Coca-Cola
our roles
  • UX & UI Design
  • Creative Development
  • Web Development
  • Prototyping
awards
  • FWA

Make Art With Your Vibes

Coco-Cola x Marshmello: name a better duo, we’ll wait.

Listen to the new Marshmello track “Numb” ft. Khalid, with a twist: your emotions transform into a unique song visualizer. With over 100,000 unique art creations made, the experience was made globally and translated into 15 languages. Because music, art, and Coca-Cola are universal, right? It’s a love language.

00:00

The Ask

Experience

Art, Music, and Code Come Alive

Coca-Cola came out with a new limited edition flavour in collaboration with DJ Marshmello and tapped us to create a fun, mobile-only site that created art out of people’s music-listening-and-loving facial expressions into art. We created an experience with 3D generative art that combines music and innovative programming. Users were able to easily download their unique art pieces as an MP4 and share it on social.

The Process

Process

Art Sprints

We worked in sprints, giving us the agility to experiment and problem-solve quickly. Visually, we took inspiration from existing campaign assets (print and motion design) to extend this art world into 3D generative art.

We create Custom Design Tools that invite the client to be part of the process, play around, and give feedback in real-time as we’re creating. This helps us move fast. We did quick iterations of real-time 3D visuals with various configurations before we were set on the look and feel.

Tunnel (Alternative Creative Approach)
Neurons (Alternative Creative)

It’s All In The Details

What makes a great experience amazing? The slickness and fluidity of all animations and transitions are especially important for a visualization app. Our Frontend Developers injected a little wow in every animation and transition.

Technology

Math Makes Great Art

With so many fun, gooey, out-of-this-world visual elements that all react to your facial features, we had to do a lot of math to get these art pieces to look so super and act so smooth. CPU-intensive calculations to the rescue! We nerded out, to say the very least.

Technologies
  • Morphcast API
  • Server-side 3D rendering
  • 3D animations in WebGL
  • Strapi CMS
  • Localization

Metrics

Creations
50K
Languages
15
Smiles
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24