Kyoto is a lightweight, highly customizable clock overlay designed specifically as a Browser Source for OBS Studio and other live streaming software. Built entirely with vanilla HTML, CSS, and JavaScript, it can be hosted anywhere (like GitHub Pages or Vercel) without needing a backend server.
- Interactive Configuration Dashboard: Easily customize your overlay through a clean, modern web interface.
- Live Preview: See exactly how your clock will look as you tweak the settings.
- Timezone Support: Display your local time or easily switch to various global timezones.
- Customizable Appearance: Change themes (Glassmorphism, Cyberpunk, Minimal, Custom), fonts, colors, background, border-radius, and scaling.
- Text Effects: Add custom borders (strokes) and drop-shadows to the clock text to make it stand out against your stream.
- Custom CSS Injection: Advanced users can write raw CSS directly in the dashboard, complete with a library of draggable DOM selectors.
- Component Toggles: Independently show or hide hours, minutes, seconds, AM/PM, and the date.
- Micro-animations: Smooth, performant CSS animations (Flip or Slide) when time digits change.
- Import/Export Config: Save your favorite setups as a
.txtfile and restore them instantly.
- Visit the live hosted dashboard: https://kyoto-lac.vercel.app/ (or open
index.htmllocally). - Use the controls on the left panel to customize the clock to your liking.
- You can click Export Config (.txt) to save your layout to your computer, or Import Config to restore a previous layout.
- Once you're happy with the live preview, click Generate & Copy URL.
- In OBS Studio, add a new Browser Source and paste the copied URL into the URL field. (Set dimensions appropriately, e.g., Width: 600, Height: 300).
The actual clock overlay is located at clock.html. You can manually pass query parameters to it if you prefer not to use the dashboard.
Example:
clock.html?theme=neon&format=24&showSeconds=false
Please see the CONTRIBUTING.md for a full list of available URL parameters and instructions on how to add new themes or animations.
This project uses purely vanilla frontend technologies:
index.html/dashboard.css/dashboard.js: The Configuration UI.clock.html/clock.css/clock.js: The actual OBS overlay application.
Feel free to fork the project and modify the CSS or JavaScript to fit your specific streaming brand!
If you find this project helpful for your streams, please consider sponsoring! Sponsor SajadTroy on GitHub
MIT License