Overlaife
Une suite complète d'overlays de streaming pour Aife. Combine des effets 3D Three.js, des animations GSAP et le rendu PixiJS avec un contrôle OBS WebSocket en temps réel et Twitch EventSub - overlays, séquences de première et minuteries de speedrun.
Vue d’ensemble
Overlaife est le système d’overlay principal du stream d’Aife. Plutôt qu’un simple overlay, c’est une suite complète de scènes browser-source - chacune conçue pour un contexte de stream différent - toutes contrôlées depuis un backend unifié connecté à OBS et Twitch.
Modules
- Overlay - l’overlay principal du stream en direct avec réactions aux événements et au chat
- Première - une séquence d’introduction stylisée pour le début du stream
- Speedrun - un timer dédié et un affichage de statistiques pour les segments speedrun
Points techniques
Les éléments 3D sont rendus avec Three.js, les transitions complexes gérées par GSAP, et la composition 2D réalisée via PixiJS. Le frontend Vue 3 écoute un serveur Socket.io qui distribue les événements OBS WebSocket et les payloads Twitch EventSub à toutes les browser sources actives.
Stack
- Frontend : Vue 3, TypeScript, Three.js, GSAP, PixiJS, Element Plus, UnoCSS
- Intégration : OBS WebSocket, Twurple (Twitch API)
- Backend : Socket.io, Firebase