Let’s take a look at the overlays and alerts we designed for Deadmau5. One of the big advantages we had when beginning this project is that the ideas wouldn’t stop flowing. I think this is the result of having such a strong brand identity and unique style to work with. As fans of Deadmau5’s music and streams I thought we’d be more nervous when working on this project, but once we got started that anxiety quickly turned into excitement. If you don’t already, you can follow Deadmau5 on Twitch and Twitter.

Creating the Alerts

Once we finalized which ideas we were going to work on we started creating mockups in After Effects. We had an interesting idea for the overlays, which we’ll get into a bit later, that would allow us to make some over the top alerts. A theme we wanted to carry over between all of the alerts was a motion graphic that revealed the text. After a few trials, we ultimately decided the easiest way to execute this idea was by using JavaScript to play a WebM file that syncs with CSS and JavaScript animations. The basic ideas here is that an element with hidden overflow opens up horizontally around the same speed that the motion graphic moves. With that out of the way, the real fun can begin.

The Nyanborghini

The first idea that hit us was having the Nyanborghini driving across the stream to reveal a subscriber’s name. But of course we didn’t just want the car driving across, we wanted the Nyan cat to move and leave a rainbow trail behind the car. The easiest way we found to achieve this effect was taking the current Nyanborghini and using Photoshop to remove most of the graphics on the car. We then recreated the Nyan cat animation and a repeating rainbow effect that followed the car across the screen. From there we just timed this animation up with the name reveal animation we talked about above. The end result is definitely one of my favorite alerts we ever made.

The PogChamp Cube

While Deadmau5 might be working on “the other cube” for his live performances, we have the PogChamp cube for one of his tip alerts. We used character rigging inside of After Effects with a simple Deadmau5 character vector.

Money Cannon

What’s inside the mau5 head? In this case it’s a money cannon. We wanted to create a fun alert that somehow had money involved, but also had a festival type theme.

Meowingtons catches a Deadmau5

While we’re fans of Deadmau5, we’re huge fans of Meowingtons. We knew from the start we wanted a cat themed alert, so we created and animated a vector cat playing with a yarn mau5 head. The animation was done in a similar way as the PogChamp cube.

Tier 3 sub

Not much to say here. We wanted something big, flashy and with a touch of RGB for the tier 3 sub alert.

Creating Deadmau5’s Overlay

There’s a lot going on under the hood with this alert system. For the design, we wanted something that could work by itself as both alerts and an overlay, but different than a simple event list. Since the alerts are fully animated we wanted a way to disable the alerts for certain scenes, but still retain an alert-like feel.

But how does it all work? First, we created our own alert system that ties into Streamlab’s websocket API. This allows us to keep the information on the stream when alerts happens. Then, using JavaScript we created the intro and outro animations for each section. At first we used WebM files that played on certain events to create the motion graphics. While this worked well and was easy to set up, the visual quality was not where we wanted it to be. So, we reworked everything to be SVG and code based animations. This not only allows for crisp and clean looking graphics, but also makes it easy to update and adapt if needed.

Finally, we faced one last challenge with this overlay system. Deadmau5’s stream gets a lot of followers. While we knew this going in, we didn’t anticipate the effect it would have on our alert system. When multiple follows came in at relatively the same time we would see the follow list queue fill up and launch the max amount of events at the same time. While this was working as intended, it simply became too distracting in our opinion. To clear this issue up we basically created a limiter on the amount of alerts that can happen at once.

Panels, offline image, social popup

Following the overlay style we wrapped up the redesign with Twitch panels, an offline image, and a social media popup. The panels and offline images were created in Adobe Illustrator and Photoshop. The social media popup is a WebM file. One question that we get asked a lot is, “how can I get a video file to play on loop with a delay?” The easiest way to do this is by creating a video file that can be linked inside of an HTML file. After that, just use JavaScript to replay the video on an interval.

We did not create the original background image used in the offline screen - we only added graphics on top of it.

We had a great time working on this project. Not only did we get to challenge ourselves to create alerts and overlays that we’ve never made before, but we also had the chance to work with someone we respect in the streaming world. Did we mention that he makes music as well?