Free youtube alerts. Mirror's Edge inspired.

To finish my "Mirror's Edge Catalyst" pack, I created the subscribers and donations design for youtube.

What you will need:

  • OBS Studio 0.14.2+ (you can use older versions, but I recommend upgrading anyways)
  • YouTube channel
  • 10 minutes

First of all you'll need to create an alerts account. To do that - go to alerts.septapus.com, login and configure it as on the screenshot below. It looks a bit scary, but it's the only thing available at the moment and it's supported by one of the YouTube's developers, so no worries.

You will need to paste the next url into the underlined fields: 

http://c2545.eu01.webzillafiles.com/screens/name-bg.png

In the message fields you can set whatever fits your taste. But I recommend using something short, so it won't break the design in case of long usernames.

When you set everything and copied the link - open your OBS and add a new Browser Source.

Paste your generated URL into the URL field, set the width and height to 1920 by 1080, FPS to 30 (it will be fine). Then delete everything in the CSS box and paste the code below.

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

div#latestSubscriber {
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    position: absolute;
    bottom: 6px;
    left: 566px;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
}

div#latest {
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    position: absolute;
    bottom: 6px;
    right: 569px;
    font-size: 32px;
    font-weight: bold;
    text-align: right;
}

div#alertContainer[hidden]{
    display: block;
    animation-name: hideAlert;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.99,0,.58,.99);
}

div#alertContainer{
    width: 100%;
    position: absolute;
    top: 35vh;
    left: 0vw;
    animation-name: showAlert;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.54,0,0,1);
}

div#alertContainer img{
    margin: 0 auto;
    display: block;
    width: 1000px;
    height: auto !important;
    max-height: 1000px !important;
    max-width: 1000px !important;
}

div#alertContainer img[hidden]{
    display: none;
}

div#alertContainer::before{
    content: '';
    display: block;
    background: url('http://c2545.eu01.webzillafiles.com/screens/arrows2.png');
    background-size: cover;
    height: 115px;
    width: 115px;
    position: absolute;
    top: 57px;
    left: 534px;
    animation-name: arrowLeftIn;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.54,0,0,1);
}

div#alertContainer[hidden]::before{
    animation-name: arrowLeftOut;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.54,0,0,1);
}

div#alertContainer::after{
    content: '';
    display: block;
    background: url('http://c2545.eu01.webzillafiles.com/screens/arrows2-i.png');
    background-size: cover;
    height: 115px;
    width: 115px;
    position: absolute;
    top: 57px;
    right: 593px;
    animation-name: arrowRightIn;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.54,0,0,1);
}

div#alertContainer[hidden]::after{
    animation-name: arrowRightOut;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.54,0,0,1);
}

div#alert{
    position:absolute;
    top: 94px;
    left: 695px;
    width: 500px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: #dc0a0d;
    height: 42px;
    overflow: hidden;
}

@keyframes showAlert{
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hideAlert{
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes arrowLeftIn{
    0% {
        left: 304px;
    }

    100% {
        left: 534px;
    }
}

@keyframes arrowLeftOut{
    0% {
        left: 534px;
    }

    100% {
        left: 304px;
    }
}

@keyframes arrowRightIn{
    0% {
        right: 363px;
    }

    100% {
        right: 593px;
    }
}

@keyframes arrowRightOut{
    0% {
        right: 593px;
    }

    100% {
        right: 363px;
    }
}

Check the "shutdown when not active" checkbox and click OK. Make sure to put the browser source above your frame. The notification widget is made for my Mirror's Edge styled frame, which you can find here.

The final step is to get the font. I always use Bebas Neue, which you can get from here. It's completely free!

If the text is weirdly offset or is bigger than your stream, that might mean, that you are using the stream resulotion other than 1920x1080. In that case - select your Browser Source, rightclick and select Transform -> Fit to screen. Everything should be fine now.

Final result should look something like this:

Hope you like it! If you have any questions - comment or message me on my discord server. If you liked the thing - share with your friends or subscribers!