Resource icon

Free Animated Lower Thirds with Dockable Control Panel v.1.5

With this tool, you can use a control panel to add and change your own lower thirds on the fly. Feel free to customize. Basic knowledge of HTML, Javascript, and CSS is required.
For communication between the control panel and browser layer, it uses BroadcastChannel API.

1. Download the Zip file, unzip it.
2. See how to install and v1.4 features: https://youtu.be/tddMYWya7O0 (skip to 2:20 minutes to see the v1.4 features).
3. See v1.5 features: https://youtu.be/nKcvu-HwP9k
4. See previous features: https://youtu.be/cQ0_1GwpwB0

Unfortunately, OBS doesn't support browser panels on macOs or Linux. It only works on Windows.

This project is based on Lower thirds in HTML/CSS https://obsproject.com/forum/resources/lower-thirds-in-html-css.928/, and Animated lower thirds with control panel https://obsproject.com/forum/resources/animated-lower-thirds-with-control-panel.922/.

I am a designer and my scripting knowledge is few. I made this tool (Frankenststool) because I needed it and I want to share it. You are welcome to improve it. I am aware that many parts of the code can make any expert cry. I'm really sorry :P

If this tool helped you, consider supporting it by making a donation via PayPal to be continuously developed and stay free. I'll be very grateful.

Screen.jpg
Author
NoeAL
Downloads
27,320
Views
50,969
First release
Last update
Rating
4.94 star(s) 31 ratings

Latest updates

  1. Logos and Backups!

    Hi everybody! First of all, I would like to thank those of you who have contributed to the...
  2. Custom Fonts, Autoload, Tooltips, and more

    Hi everybody! Thank you for the positive reviews and comments! Video...
  3. Themes, Custom Times, Visual fixes

    Hi! Thank you for the positive reviews and constructive comments that you send. This time...

Latest reviews

Obrigado!! A sua colaboração e ajuda é ótima!!!
An absolutely phenomenal tool! Simple, intuitive, useful - fabulous. FREE! Thank you very much for your work.
I love this! I can finally replace an old, clunky design I have been using for months. My only request is if there was a way to have a large cooldown between the last and first on a set of memory switches? I love using this as a social media placer, but I would rather it populate at certain times than be on a continuous loop back to back simply because I don't want the cooldown between individual switches to be long.

Also, if there is a way to use it between scenes differently, as in the 2 tabs I use in my Main scene need to have different colors for it to be used in an intermission scene, or have a background that's not an image source for contrast. Just something that isn't the same as the other scene. Again, I am not sure if this is possible, but if it is, I probably don't know about it lol.
I`ve tested it and just work smooth.

I`m excited with possibilities of customization using CSS and creating a custom docks for control everything on my own News Cgs.

Thank you!
Me parece brillante lo que hicieron, sigo todos los pasos pero no logro activar el panel, tengo hace OBS Live sera ese el problema?
I just signed up for this forum to appreciate Noé Lier for this excellent work.
This is also one of the first times I donated to free software. But this is so useful, practical, and easy to use that I just had to contribute to further developments. Noé, you certainly have the skills, vision, and quality of work.

The software has the big benefit of allowing lower-thirds to become super CPU lightweight, as opposed to using .mov files with alpha channels.

Installation and usage are made easy with the very valuable and really well-made video tutorials by Noé.

It's growing to become considerably versatile in customization, and I'm really excited to see where Noé takes this further.

Here are a couple of things I'd like to propose for the development Roadmap. If some of these things are already made, I'd really like to know, and I apologize for the unnecessary suggestions:

1) I'd love to be able to customize "border-radius" and "box-shadow" for the Background, and "text-shadow" for the fonts.

2) It would be nice to have some tooltips showing the title for each control after a while on-hover, so one could more quickly learn what each GUI item does by getting a small hint.
These hint-tooltips could be deactivated much like the existing name-tooltips.

3) I'd love to have a small example/tutorial on how one could customize via CSS, to allow those of us with some web knowledge an easier way to access more powerful customization, for example regarding animations and (1).

4) Finally, it might be useful to be able to upload an "avatar/photo" for each entry, similar to what is currently done with the logos. The goal here is to be able to upload a photo of John Doe for easier recognition, not having to memorize who is in the middle of an event array of faces, highly reducing the risk of confusing names/faces.

Cheers
This is the most beautiful Lower Thirds manager ever!
This is such an awesome feauture. We had to wait for a while, but hurray. Muchos gracias!!!!
made my job easier
Finally registered here just to support this. It's what most of us are looking for! Simple, light, easy installation.

Patrick Ewalt's suggestion is something I'm looking forward to.

Btw, how do i set up the logo beside the name part? Did i miss something?

Keep up the awesome work buddy!
Top