Smart Lower Thirds

Smart Lower Thirds 1.2

Hey everyone! I've just pushed a major update to the Lower Thirds Control Panel. This release focuses on customization, ease of use, and making your broadcast look even improved!


Here’s what’s new, starting from the essentials:

Fonts Settings​

You now have complete control over your text styling:

  • Custom Fonts: Choose from a curated list of professional Google Fonts (Montserrat, Poppins, Roboto, etc.) to match your brand.
  • Independent Sizing: Adjust the font size for the Name and Title independently. No more "one size fits all"!
  • Color Customization: Pick any color for your text with the new color pickers.

Persistent Settings (Auto-Save)​

  • Auto-Save: All your settings—text, colors, animations, and even active logos—are now saved automatically to your browser's local storage.
  • Instant Restore: Refresh the page or restart your browser, and everything comes back exactly how you left it.

Logo Support (New!)​

This is the big one! You can now integrate your own logos or icons directly into the lower third design.

  • Easy "Browse" Button: Just click "Browse" to select a logo (img) from your computer.
  • Integrated Design: The logo sits in its own container that perfectly matches your lower third's background style (including glassmorphism/blur effects!).
  • Customizable:
    • Position: Place it on the Left or Right of the text.
    • Size: Use the new slider/input to scale your logo perfectly (20px - 200px).
    • Toggle: Turn it on or off with a single click.

Better Control & UI​

  • Dynamic Panels: Need more than 4 lower thirds? You can now Add unlimited panels or Delete the ones you don't use (look for the Trash icon ️!).
  • Scrollable Settings: The Advanced Settings area is now scrollable, so if you're on a laptop or smaller screen, you can easily reach all the new controls without them being cut off.

How to Navigate​

  1. Fonts & Colors: specific controls are now found under the Advanced Settings (gear icon ⚙️) of each panel.
  2. Logos: Open Advanced Settings and scroll down to the new "Enable Logo" checkbox. Once checked, the file picker and size controls will appear.
  3. Managing Panels: Use the + Add button at the bottom to create new slots, or the Trash Can icon in the panel header to remove them.
Enjoy the update and let me know what you think! Happy streaming!

Critical Bug Fix: Exit Animations​

Fixed: Exit animations now properly respect the timing settings instead of disappearing instantly.

The Problem:

  • When hiding a lower third, it would vanish immediately instead of animating out
  • The "Animation Out" duration setting was being ignored
  • All transitions (Slide, Bounce, Fade, etc.) were affected
The Solution:

  • Completely rewrote all exit animation keyframes to include proper starting states
  • Exit animations now smoothly transition over the full duration you set
  • If you set "Anim Out" to 2 seconds, it will actually take 2 seconds to animate out

New Feature: Scroll Transition​

Added a brand new Scroll transition effect:

  • Enter: Lower third "unrolls" horizontally like opening a scroll
  • Exit: Compresses and "rolls up" before disappearing

How to Update​

  1. Backup your current files (just in case)
  2. Replace your

    obs_lower_thirds_source.html with the updated version
  3. Replace your

    obs_control_panel.html with the updated version
  4. Refresh your browser sources in OBS
Top