Building an Image Generator for the Number 1 Track on Spotify 🌋

Taki Taki Rumba! DJ Snake featuring Selena Gomez, Cardi B, and Ozuna

DJ Snake, Cardi B, Selena Gomez, and Ozuna have released their new song, Taki Taki, into the world and it has quickly soared to #1 on Spotify’s Global Top 50. A few weeks ago, I was made aware of this mega track and asked to come up with a marketing concept. Without hearing or seeing anything related to the track, I immediately knew I wanted to build something simple.

You see, these are huge global acts. So for starters, we can expect that they’re going to bring a lot of traffic with them. I didn’t want to have to worry about databases or backend server processes which might take the whole experience down. And, unlike my recent sensory campaigns for Behemoth and A Quiet Place, I wanted to make sure all technology worked in any environment, including those pesky in-app browsers. I also wanted to make sure to consider speed and language accessibility given the global reach.

You can try out the app here and read on to find out how we did it.

Concept

Figma wireframes used in proposal

The goal was to build a web app that was immediately understood, quick to interact with, and produced something fun worth sharing. An image generator seemed like the route to take. Once I finally saw the artwork, the concept was clear. We would allow fans to write their names into the masking tape on the cover to produce a new image (and possibly a video) which they could share. The generator should be capable of producing square, portrait, and landscape content so that fans may share wherever they want.

The flow I settled on consisted of three core pages. The Index establishes the purpose of the app and invites the user to participate with a big well placed button they can smash. I went through several iterations of how users could contribute their friends names but decided on the simplest user pattern for the Create page: four <input> fields. 💪🏻 Once the user clicks “Save Friends,” the app goes to work to create all the share images and then presents all of the sharing options on the Share screen.

I assumed a user could go from not knowing what this app was about to producing a piece of shareable content within 30 seconds.

Design

Expanding the square art to various dimensions

One area I found myself spending a lot of time on was coming up with a design system as all I was given was the square single artwork. Knowing that I wanted to create several different images (square, landscape, and portrait,) I started in Photoshop by simply extending the square artwork both horizontally and vertically. I accomplished this with a mix of the Content-Aware Move, Clone Stamp, and Patch tools. This gave me nice background images I could use for both the app and social content later on.

After realizing I was going be in for a world of hurt if I tried to make the volcano composition fully responsive to any device size, I decided to include it as a border wrapped square on the frontpage. That’s when everything began to fall into place. Following the artwork’s lead, I set the typography on the site to be various weights of ITC Avant Garde Gothic Pro, served from Typekit. I then added a fullscreen yellow to blue gradient originating from the bottom along with a CSS animation to create a simple glowing lava effect.

#background{
animation: glow 5s ease infinite;
background-image: linear-gradient(to top, #FF5A00, #012061);
background-size: 100% 200%;
}
@keyframes glow{
0%{
background-position: 0% 50%;
}
50%{
background-position: 0% 75%;
}
100%{
background-position: 0% 50%;
}
}

I then pulled a rocky texture from the artwork and blended it on top of the gradient to give it more depth. Finally, if you view the website on desktop, you’ll notice a couple of embers floating in from the bottom. While I was tempted to create this in CSS or WebGL, I simply blended a low res stock video on top to complete the effect. MVP, my friends.

#texture{
background-image: url(texture.jpg);
background-size: cover;
mix-blend-mode: soft-light;
}
video{
mix-blend-mode: lighten;
}

I love the ability to blend elements with CSS and the technique is well supported across browsers. Except for Edge, of course. 🤦🏻‍♂️ Luckily, I was able to make a simple check and hide both the texture and video accordingly.

@supports not (mix-blend-mode: multiply){
#texture, video{
display: none;
}
}

Now that we know how the design will be accomplished, let’s move onto some development highlights.

Generator

Taki Taki Layers

I’ve created plenty of image generators in the past and these projects typically start by reverse engineering the artwork into drawing instructions that I can use alongside HTML5 canvas to construct new images. The area that is truly dynamic on our meme is the names written on masking tape. If we consider each piece of tape individually, we’ll want to understand it’s position, rotation, text alignment, and width. I then add these properties to an array I can reference later. Here’s an example of one friend:

[
{
original: "Ozuna",
name: "",
rotation: -90,
top: -300,
left: 0,
align: "left",
width: 550,
height: 145
}
]

With my drawing array prepared, it’s time to create the tape collage. Note, that this still doesn’t include the volcano background image. I am simply turning the four name fields into the tape collage using my drawing instructions. The first thing we’ll want to do is create an offline canvas that will hold our tape collage.

let tapeCanvas = document.createElement('canvas')
tapeCanvas.height = 1080
tapeCanvas.width = 1080
let tapeContext = tapeCanvas.getContext('2d')

We will then loop through each of the friends and create yet another offline canvas for each. This time the canvas will be sized to that of a piece of tape and we’ll add both a tape texture and the friend’s name. Finally, we’ll want to add each individual tape canvas onto the tape collage using the position and rotation properties we set up beforehand. Here’s the whole code block:

this.friends.forEach((friend, index) => {
let canvas = document.createElement('canvas')
  canvas.height = friend.height
canvas.width = friend.width
  let context = canvas.getContext('2d')
  context.drawImage(tapeImage, 0, 0, canvas.width, canvas.height)
  context.fillStyle    = '#003A94'
context.font = "130px 'Brush'"
context.textAlign = friend.align
context.textBaseline = 'middle'
  context.fillText(
friend.name.toUpperCase(),
canvas.width * friend.start,
canvas.height / 2
)
  tapeContext.drawImage(
canvas,
(tapeCanvas.width / 2) - (canvas.width / 2),
(tapeCanvas.height / 2) - (canvas.height / 2)
)
  tapeContext.setTransform(1, 0, 0, 1, 0, 0)
})

Once I have created my tape collage, I will simply draw it onto each of my various background sizes. I’ve made this easy for myself by making sure each composition accepts a square tape collage aligned to the center of the image. For example, here’s what it takes to create the portrait image.

context.drawImage(backgroundImage, 0, 0, 720, 1280)
context.drawImage(tapeCanvas, 0, 280, 720, 720)

Easy stuff. You spend a bit more time on the frontend reverse engineering the image and defining each of those drawing properties, but the outcome of that work is things falling perfectly into place.

Video Creator

Video created using Mock

In addition to generating static images, we wanted to add the ability to create Instagram story videos. With projects like Marilyn Manson and apps like Turn, it’s safe to say that I love generating videos at scale. The only issue with creating videos and presenting them to users on a mobile browser is that the browser won’t let them download the video. Haha, okay, that’s a pretty big issue. The workaround I’ve been using is simply obtaining an email from the user and emailing them the video once it is created. While you might lose the user’s attention in the 1–2 minutes it takes to generate the video, your content will be sitting in their inbox and depending on their device notifications, they will be made aware of that.

Since I already have a nice portrait sized image generated, I simply want to add a bit of lava texturing and a clip from the track to complete my video composition. With the client’s help, I cut an appropriate < 15 second clip from the track using Fission. I then created a mask of the lava areas using Photoshop and used it alongside a lava stock video to create a nice vertical flowing lava effect. I will blend this video on top the portrait image to make it look like lava is flowing down the volcano. 🌋

As soon as the user enters their email address, I send a Base64 representation of the portrait image along with their email address to a Lambda function. That function downloads their image, the lava mask video, the Taki Taki audio clip and merges them together into a new composition using FFMpeg. I then email the final video composition to the user as an attachment using Postmark.

Postmark is great for this purpose because you can design a nice templated email right from their website. The email itself is very simple to strengthen deliverability and conversion. I include a bit of the volcano aesthetic and some downloading instructions. Since this is a transactional email, you’ll want to go light on the marketing. Besides, you’re sending your fan a piece of marketing content they are going to share. 😉 No need to oversell.

Thanks

Ozuna, Selena Gomez, DJ Snake, Cardi B

Thanks to Max Weinberg and his team at Geffen Records for bringing this project to me a month ago. Thanks to DJ Snake and his representation for approving the concept and direction with only positive critiques throughout. Contrary to the explosive imagery, this was a very chill project to build. If you haven’t heard Taki Taki yet, may I suggest the new music video which has already racked up 40 million streams.

Until next time, TAKI TAKI RUMBA!