Pyun is a real-time interactive overlay system designed for streamers. It supports unlimited teams, various modern visual styles, currency score formats, milestone systems, and seamless integration with broadcast tools like OBS, Streamlabs, vMix, and XSplit.
- 🎨 Premium Visuals: Modern design with smooth animations powered by Framer Motion.
- 📱 Fully Responsive: Overlay layouts that maintain visual consistency across all window sizes.
- ⚡ Real-time Interaction: Dynamic hover effects and precise team information tooltips.
- 🛡️ Frameless Control Panel: A wider workspace by removing native window frames.
- ⌨️ Global Hotkeys: Instant score control without needing to switch windows.
- 🚀 Unlimited Teams: Add as many teams as you need; the layout adjusts automatically.
- 💰 Currency Mode: Format scores as monetary values ($, Rp, RM, etc.) with automatic thousands separators.
- 🎯 Milestone Trigger: Celebration fireworks effect when the total score/donations reach specific multiples.
- ✏️ DM Sans Typography: Modern font for overlay titles with weight and letter-spacing customization.
# Install dependencies
npm install
# Run Full Electron App (Development)
npm run dev
# UI Only (Browser Mode - No Electron)
npm run dev:ui
# Build Production (.exe / .app)
npm run build| URL | Component |
|---|---|
http://localhost:5173 |
Control Panel (Admin) |
http://localhost:5174 |
Overlay Preview |
| Layout | Description |
|---|---|
| Horizontal Bar | Classic proportional bar with smart tooltips and leader glow effects. |
| Neon Stack | Futuristic neon block stacks that are fully responsive. |
| Pie / Donut | Circular charts with centralized team identity and dynamic legends. |
| Character VS | Fighting game style with modern textured HP bars. |
| Floating Bubbles | Score bubbles that float organically across the screen. |
| Vertical Bar | Vertical bars with dynamic water wave animations. |
| Speedometer | Vehicle dashboard-style 1-on-1 gauge for high-tension moments. |
| Scoreboard | Minimalist grid scorecards for multiple teams at once. |
| Multi Progress ⭐ | Individual stacked progress bars per team — ideal for multi-participant voting/donations. |
Pyun supports currency-based scoring for donation and fundraising scenarios:
- Custom Symbols — Define your own currency symbols ($, Rp, RM, etc.).
- Automatic Formatting — Thousands separators appear automatically in all views (Panel, Preview, Overlay).
- Input Masking — Thousands separators appear in real-time as you type nominals in input fields.
- Precision Calculation — Progress bar percentage calculations remain based on raw values.
An automated visual celebration system to boost viewer interaction:
- Set a milestone interval value (e.g.,
1,000,000). - When the accumulated total score/donation crosses that multiple, a fireworks effect appears on the overlay.
- Triggered milestones will not repeat until the next multiple is reached.
- Run Pyun and click Start Overlay.
- A new transparent window will appear.
- In OBS: Add Source → Window Capture.
- Select the "Pyun Overlay" window.
- Enable the "Allow Transparency" option (Use 'Windows 10' Capture Method if necessary).
- Done! You can drag the overlay window directly on your desktop.
pyun/
├── assets/ # Logo & branding assets
├── doc/ # Issue tracker & documentation
├── src/
│ ├── main/ # Electron Main Process (IPC, Window Management)
│ └── renderer/
│ ├── control-panel/ # Dashboard UI (React + Zustand)
│ ├── overlay/ # Overlay App (Transparent window)
│ └── src/ # Shared components & services (@shared)
│ ├── components/overlays/ # MODULAR LAYOUT SYSTEM (9 layouts)
│ ├── services/ # IPC communication layer
│ └── utils/ # Currency formatting & helpers
└── vite.config.js # Build configurations
This project is licensed under the MIT License - see the LICENSE.md file for details.
Built with ❤️ for the Streaming Community.