Custom OBS overlay – Falling Hearts and Coins animated with CSS3

The overlay is a piece of content (image, text, web page, script) displayed on top of a live stream scene.

In this particular case, I’ve added a non interactive animation which will be visible on top of the broadcaster’s stream.
The overlay is triggered manually by the user.

Overlay setup:
1. download the zip file and extract content on your desktop.
2. open OBS and from Sources manager click the + icon in order to add a new scene

3. A new panel will pop-up with available options. Select Browser

4. Give it a name if you want (this step is optional but it is a good idea to type a name just in case you have multiple overlays in Sources manager box)

5. Select the Local file checkbox and browse for the html file you’ve downloaded.
– set up the relative width and height of the overlay and also select checkboxes below (see the screenshot)

6. Based on your screen resolution drag the red corners of the overlay for better positioning

Note:
– because all resources will run from your desktop there is no need for additional hosted resources (better for streaming, no additional CPU and bandwidth consumers)
– the overlay is triggered manually by the user. Click the eye icon to enable or disable the overlay.
– this particular OBS overlay was designed and coded for OBS / Chaturbate live stream

Download source code