Twitch Effects

Mobile

Overlay

Overview

A creative, modular overlay system for streamers and vloggers that delivers expressive, customizable on-screen visuals — all controllable in real time from Android and Wear OS companion apps. Built with Firebase Realtime Database and a locally hosted web overlay, Twitch Effects lets creators host and manage dynamic, interactive widgets directly from their recording device for hands-free, low-latency control.

Highlights:

⚙️ Real-time updates powered by Firebase Realtime Database for instant parameter sync.
🖥️ Web Overlay — responsive HTML/CSS/JS visuals rendered over any livestream feed.
📡 Local Hosting — lightweight server runs on-device for offline, low-latency operation.
📱 Companion Apps — Android + Wear OS apps built with Kotlin + Jetpack Compose.
🎨 Modular Widgets — includes weather & location, live map compass, pixelated “Doom Face” HUD, and retro standby screen.
🔧 Fully Customizable — toggle overlays, adjust themes, and personalize display behavior hands-free.

How It Works

Twitch Effects connects your wearable, the cloud, and your stream in one seamless feedback loop.

Wear OS / Mobile App

Trigger and tweak effects directly from your wrist.
Real-time toggles for each effect
Quick-access settings for instant adjustments
Sends updates instantly to Firebase backend

Firebase Realtime Backend

Syncs commands instantly between devices and overlay.
Lightweight realtime database
Handles state changes with minimal latency
Keeps mobile, wearable, and overlay perfectly in sync

Dynamic Stream Overlay

Renders expressive on-screen visuals live in your stream.
Listens for Firebase updates to reflect new states
Supports custom pixel art, GIFs, and animations
Runs locally or hosted for OBS/streaming setups

Features & Widgets

Weather + Location Overlay

Displays live weather and geolocation data from Firebase.
Location sharing toggle for privacy.
Optional dark/light themes.

Live Map & Compass

Real-time directional compass synced to device orientation.
Adjustable zoom level.
Switchable dark/light map modes for day/night recording.

Doom Face HUD

Retro-inspired pixelated overlay mimicking classic Doom HUD with dynamic expressions and accessories

Standby Screen

Togglable full-screen overlay for “pause” or “technical difficulties” scenes.

Detailed Feature Screens

Weather + Location Overlay

Wearable Controls:

Toggle on/off to display weather and location on your overlay.
Toggle Location settings on/off to include location data in weather overlay widget.

Overlay Behavior:

Shows live weather info on stream in a small, stylish HUD.
Auto-updates with location and temperature changes.

Live Map & Compass

Wearable Controls:

Toggle on/off to display the map overlay widget.
Toggle between Light and Dark Mode map style.
Adjust overlay zoom.

Overlay Behavior:

Displays live map centered on your location.
Compass pointer updates with device orientation.

Doom Face HUD

Wearable Controls:

Toggle on/off to display the Doom-inspired HUD.
Swipe and tap to change facial expressions, and accessories (hats, hairs, glasses)

Overlay Behavior:

Fun, interactive visual flair
Real-time updates tied to wearable inputs
Fully customizable animations

Standby Screen

Wearable Controls:

Tap to enter standby mode for overlays.
Set time to turn turn off standby after a specified time period.
Standby time remaining shown within selection screen and main menu.

Overlay Behavior:

Hides all other overlay widgets while active.
Persists other overlay widget states so return to widget states is instant.
Optional audio can play while stand-by state is active.

Companion Mobile App

Steaming Elements Settings

Dedicated screen to enable or disable different streaming element
Individual toggles for:
- Compass Map
- Full screen overlay map view

Map Settings

Dedicated screen to enable or disable map settings
Individual toggles for:
- Light/Dark Mode
- Compass Map Zoom level
- Full Map Zoom level

Location Settings

Dedicated screen to enable or disable location sensors data streaming.
Individual toggles for each sensor type:
- Include last update time
- Location
- Altitude
- Speed
- Bearing
- Total distance traveled

Device Sensor Settings

Dedicated screen to enable or disable device sensor data streaming.
Individual toggles for each sensor type:
- Linear acceleration
- Heart rate (wearable sensor)
- Ambient Temperature
- Ambient Humidity
- Step Counter

Doom Face Settings

Toggle on/off to display the Doom-inspired HUD.
Swipe and tap to change facial expressions, and accessories (hats, hairs, glasses)

Tech Stack

🎨 Frontend: HTML, CSS, JavaScript

⚡ Backend: Firebase Realtime Database

📱 Mobile: Android (Kotlin, Jetpack Compose), Wear OS

🌐 Hosting: Local HTTP server on device

🧩 Media: Custom pixel-art effects & dynamic compositing

Page updated

Google Sites

Report abuse