• 🇬🇧 English
• 🇧🇷 Português

• About the Project
• Repository Structure
• Running the New Project
• Running the legacy Project
• License

The Paladins Dynamic Overlay was originally created in 2018 as a private personal project to enhance the streaming experience for the game Paladins. Now, in 2025, it is being refactored and open-sourced.

🔗 For more details on this journey, check out my LinkedIn post.

✅ Built with Next.js ✅ WebcamOverlay with manual character selection ✅ Dynamic border color and character image change ✅ Resizable WebcamOverlay component

1. 🛠 Component Editing Page
2. 🔗 Exportable overlay links for OBS integration
3. 🏆 Streamer name displayed alongside the WebcamOverlay border
4. 🎨 Animated Borders for WebcamOverlay
5. 🔥 Animated effects around character images
6. 🖼️ Presets for character images (including GIFs)
7. 🎭 Text Banner Component (e.g., "Latest Follower")
8. 📄 Complete pages where multiple components can be combined and exported
9. 🖱️ Drag and Drop support for image positioning
10. 🔄 Logged-in Area for automatic character updates via Paladins API

• 🌐 Fully customizable overlays with any images and colors, beyond just Paladins themes

• master → Contains the stable refactored version.
• refactor → Features in development before merging into master.
• legacy → The original 2018 version, available for comparison.

1. Clone the repository:

   git clone https://github.com/vhrita/paladins-dynamic-overlay.git
   cd paladins-dynamic-overlay

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Access it at:

   http://localhost:3000
   

1. Clone the repository if you haven't already:

   git clone https://github.com/vhrita/paladins-dynamic-overlay.git
   cd paladins-dynamic-overlay

2. Switch to the legacy branch:

   git checkout legacy

• paladins.js → Replace YOUR_PALADINS_API_KEY and devId.
• spotify.js → Fill in YOUR_CLIENT_ENCODED and YOUR_SPOTIFY_AUTH_CODE.

• Using VS Code Live Server:
  1. Install the Live Server extension in VS Code.
  2. Right-click index.html and select Open with Live Server.
  3. The project will automatically open in your browser.

This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 (CC BY-NC 4.0). This means:

✅ You can:

• Use, modify, and share this project for personal and non-commercial purposes.
• Modify the code as needed, as long as you credit the original author.

❌ You cannot:

• Use this project for commercial purposes without explicit permission.
• Claim ownership of the original project.
• Distribute modified versions without indicating that changes were made.

For more details, see the LICENSE file.

Now you're ready, enjoy! 🚀