Stream Overlays
Time Lord streaming overlays for OBS and broadcasting software
OBS Setup Instructions
Setup Steps
1
Open OBS Studio
Launch OBS Studio and go to your scene
2
Add Browser Source
Click the + button in Sources and select "Browser Source"
3
Copy Overlay URL
Copy the URL from the overlay you want to use
4
Configure Source
Paste the URL and set the width/height as shown
5
Position & Test
Position the overlay and test with your stream
Pro Tips
Refresh Rate: Set browser source refresh to 1 second for live updates
Transparency: Overlays have transparent backgrounds for clean integration
Multiple Overlays: You can use multiple overlays simultaneously
Custom CSS: Add custom CSS to browser source for personalization
Testing: Always test overlays before going live
Technical Details
Technology Stack
- HTML5 & CSS3
- JavaScript ES6+
- WebSocket Connections
- CSS Animations
- Responsive Design
Update Frequency
- Real-time track updates
- 3-second refresh rate
- Auto-reconnection
- Error handling
- Fallback displays
Customization
- CSS variables
- Color themes
- Font options
- Animation speeds
- Layout variants