"Tudum"

Say it out loud! That's the name Netflix assigned for their 6-second logo (bumper) animation at the start of everything. Everyone knows what this looks and sounds like, and that's the point.

Placing a bumper at the beginning of a video is an established broadcast design pattern — a reminder of the media channel it came from.

What does broadcast design have to do with Threads?

We don't stream video content, but we do export video narrations of threads for broader distribution outside our product.

These exported video narrations could be shared anywhere: Twitter, TikTok, Instagram, LinkedIn, Blog Posts, and press coverage.

To build brand equity and recognition, we decided that a sound & motion sequence in front of every great thread would be a compelling improvement to our brand's design system.

What's the process for making ours?

1. Decide on the format
2. Animate the sequence
3. Add sound effects
4. Combine & Optimize

Deciding on a format

Since this appears at the start of every exported video, this logo animation needs to be extremely short. We don't want to get in the way of the content.

• Netflix "Tudum — 6 sec
• Nintendo Switch — 3 sec
• Threads — under 2 sec would be ideal

1920x1080 felt like the decision for widescreen exports, and 1080x1920 for portrait (mobile) video exports. We wanted to support both cases.

This has the added benefit of leveraging existing presets for HD and 4K across tools we already use — After Effects, Media Encoder, and Handbrake.

animating the sequence

We knew we wanted a few things out of this:

• smooth, satisfying motion (evenly timed & eased)
• seamless & could loop if necessary (like a loading spinner)

With that considered, we arrived at the sequence of squares that could animate in and potentially repeat & loop forever.

In this version, the squares fade out after a short delay, creating the animated loop we were thinking about.

Ultimately, this is better used as an indeterminate loading indicator (when looping for a longer period is necessary).

We've been building Threads for over 4 years, but our brand and identity are entirely new. We needed to build recognition too. Thus, we decided to include the wordmark.

We started with a storyboard in Figma for the visual planning.

The background color transitions from the solid color of our old brand → to a gradient reflection created by our new app icon.

Initially, we rendered the object as an extra large PNG because it gave us a lot of surface to work from.

With the surface of our app icon being reflective, we could have animated the environment in Blender, creating a more animated backdrop. But in these fleeting 2 seconds, we didn't want to go too hard.

More visual noise would take away from the logo and the impact of the moment and maybe even overshadow the thread.

It needed to be simpler.

In After Effects, it's easy to create a 4-color gradient layer.

This decision didn't result in a perfect replica, but it accomplished a few things:

• It allowed us to use the colors we wanted
• It allowed us to better control the gradient animation
• It was a more straightforward workflow

• The logo animates in nicely
• The background feels good
• How should the wordmark appear?

It made sense that it appears as a final note. It should feel like hitting Return to start a new line...

adding sound effects

Hitting the Return key is a pretty emphatic gesture, and we love the narrative symbolism behind a thread being a written piece of communication... something that is normally typed. Threads is a fast, functional, keyboard-friendly tool.

To test this concept, we started using a crappy recording ala iPhone voice memo app. We needed ~7 keys to match the 7 blocks being animated in, so we typed the word "T H R E A D S" a few times and mashed the return key at the end.

Not great.

The background noise is awful, you can hear the breathing, and as for the keyboard sound, it's too quiet to be effective. Using a Macbook laptop keyboard means it's actually supposed to be quiet... which is doubly frustrating.

We still believed in the concept.

There just needed to be some help executing the sonic portion of the branding.

We purchased some professional sound effects, chopped them up to our liking, and tracked them together to create a new sound:

Combining sound & motion choices

Here's how it looks after combining the sound choices with the background gradient, while paying attention to the technical aspects we decided on earlier.

• Weighing in at 2 sec of animation
• Exported as an MP4 just over 800kb

Cleaning up audio

This final step is a shoutout to our teammate @Kentaro who helped us take the sonic brand to the next level.

As a part-time musician, he has access to a suite of tools that are outside of the rest of our expertise. After several iterations, combinations of warps, zips, hums, and whooshes, we arrived at the theatrical experience we had in mind at the beginning.

et voilà!

The result is a satisfying flourish. Here's the finished exported composition that we use in our exported video narrations.

Closing thoughts:

Using Threads reclaims precious "maker time," as our team knows where things are, as well as the progress we've made. In this exercise, the reclaimed time allowed us to re-learn After Effects.