Overlaife
A comprehensive streaming overlay suite for Aife. Combines Three.js 3D effects, GSAP animations, and PixiJS rendering with real-time OBS WebSocket control and Twitch EventSub - covering overlays, premiere sequences, and speedrun timers.
Overview
Overlaife is the main overlay system powering Aife’s stream. Rather than a single overlay, it’s a full suite of browser-source scenes - each purpose-built for a different stream context - all controlled from a unified backend connected to OBS and Twitch.
Modules
- Overlay - the main live stream overlay with real-time chat and event reactions
- Premiere - a styled intro sequence for stream start
- Speedrun - a dedicated timer and stats display for speedrunning segments
Technical Highlights
3D elements are rendered with Three.js, complex transitions handled by GSAP, and 2D compositing done via PixiJS. The Vue 3 frontend listens to a Socket.io server that fans out OBS WebSocket events and Twitch EventSub payloads across all active browser sources.
Stack
- Frontend: Vue 3, TypeScript, Three.js, GSAP, PixiJS, Element Plus, UnoCSS
- Integration: OBS WebSocket, Twurple (Twitch API)
- Backend: Socket.io, Firebase