obs-lower-thirds

KO | EN

gitlite — search

#generative-ai #svg #open-source #gemini #tensorflow #video #openai #nextjs #ai-agents #html

obs-lower-thirds

(★ 13)

Lower thirds on the fly. Completely free!

File Explorer

ZIP Download

- index.html
- - normalize.css
  - style-001.css
- - logo.png
- - jquery-scrollpanel-1.1.0.min.js
  - jquery-scrollpanel-1.1.0.zip
  - jquery.js
  - jquery.mousewheel.js
- browser-source.html
- config.json
- control-panel.html
- names.json
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

1. Donwload OBS Tools.zip and 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 :)

Works only on Windows, OBS 25.0+. It'll not run on Mac and Linux because there is no Custom Browser Docks feature for them yet.

It's just a working proof of concept, but works OK and it is being improved. 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 default color scheme is for OBS "Acri" theme, there are themes for "Acri", "Dark" and "Rachni" OBS Themes, just change in settings.

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

obs-lower-thirds

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

obs-lower-thirds

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README