Resource icon

Free Animated lower thirds with control panel 2020-04-12

1. Unzip the file.
2. Add control panel: View/Panels/Browser panels. Add title in left column (ie. "Lower thirds"), put a path to file "lower thirds/control-panel.html" from the extracted folder into right column. Click "Apply" and close window. You can dock the panel between existing panels.
3. Add new browser source, pointing to file "lower thirds/browser-source.html". Set width to 1920 (or any other you use for streaming).
4. You can use predefined list - just click on the name - or type new data on the fly, then show them by clicking "Show". You can edit predefined values in "control-panel.html" file. Also you can change the logo. Basically, you can change everything, cause it's just a bunch of CSS lines :)

Tested only on PC, OBS 25.0+. I hope it'll run on Mac and Linux too.

It's just a working proof of concept, but works OK. I use simple transition, but you can do your own template and animate with CSS transitions, keyframes or whatever you want. For communication between control panel and browser layer I use BroadcastChannel API.

Panel color scheme is for OBS "Acri" theme, you can set your own colors in common/css/style-001.css (:root section).

Of course, there's a room for improvement: locked top panel, template system, animated SVG's as icons etc.

As a little bonus you can add clock by adding "clock-digital-1/index.html" file as browser source. I'm working on news ticker with the same panel idea as lower thirds, so stay tuned :)
First release
Last update
4.71 star(s) 14 ratings

Latest reviews

Great plugin for lower thirds. Definitely customizable. You do need to know CSS to modify it beyond its core presentation. But it checks the boxes for me. Now I'm off to read up on CSS
Very useful resource. Thank you very much for this.
Great resource! Thank you for producing and sharing it.
Excellent Plugin took me less than 10min to figure it out, and the fact that itis fully customizable makes it awesome.
Works pretty well. Need to tweak of few things in the css to make it work better. It was just what I need for my stream
Great! This could be the basis of a program to make youtube livestream comments!

Now we just need a way to read the comments on the youtube chat and exchange the pre-defined data. >.<

Congratulations! :D
Absolutely Excellent and Simple! My partner is going to build a csv file reader and make some changes that would allow this to read through a list of names. We will be using it for a graduation ceremony with 400 students.
Let me know how we can share our updated code when it's ready.
Thank you very much! This improves the workflow a lot!

Is there a way for the script to read the names as a csv-file? I know how to edit the html files, but it would make it even easier if it could be done as a csv fie.

Also - it seems like the animation is different for in and out. I modified the in-animation, but could not find any setting for the out animation.

Even with little knowledge I changed the interface of the resource and also changed the predefined names.
Works very well and using HTML/CSS is a great idea for this. Thanks for the work!