XYAIN'S CUSTOM CHAT

Twitch chat → talking heads on your stream

Channel
Speakers (up to 4)
Enemies / NPCs
Props & tokens
Drag props anywhere on the overlay with the mouse (use "Interact" if it's inside OBS). Transparent PNGs work great for item icons, coins, initiative markers…
Background
You can also just drag the background itself to reposition the crop. Zoom in and pan to frame exactly the slice you want. Turn "Show background" off to go back to a transparent overlay for OBS.
Stream safety
Each speaker can also only hold 5 queued messages at a time — if they spam, the oldest get dropped.
Narrator & dice
Your speakers (plus you and mods) can type !roll 2d6+3, !roll d20, or just !roll in chat — or force a roll for the DM, any party member, or any named enemy right here. Natural 20s and 1s get the respect they deserve.
Scenes
A scene stores the background, all props, and where everyone stands (plus which enemies are out). Load all restores everything from the snapshot. Keep party swaps in the scene's background and its enemies (they always come with the scene) but leaves your party members and tokens exactly where they are. !scene name in chat (you/mods) does a full load. Scenes with big backgrounds eat storage — keep a backup exported if you build a lot of them.
Pronunciation
Fix names the TTS butchers — e.g. say Xyain as Zy-ann. Applies to everything spoken; bubbles still show the original text.
Backup
Settings live in this browser's storage — export a backup file so a cleared OBS cache or a new PC doesn't wipe your whole setup.
Global
Drawing
Click the ✏ pencil (top-left) to draw on the overlay — circle things on the map, mark positions, sketch the plan. Pick a color, set the brush size, use the eraser or undo, and 🗑 clears it all. Click the pencil again to put the pen down so heads and props are draggable again. Drawings aren't saved — a reload wipes the board.
OBS setup
Add this file as a Browser Source in OBS: check "Local file" and pick this HTML file. Background is transparent by default. Click "Interact" on the source to open this panel inside OBS.

Heads up: the Google voices only exist in Chrome (and need internet). Inside OBS's built-in browser you'll get your Windows (Microsoft) voices instead. If you want the Google voices, run this page in Chrome, turn on the green-screen option above, then window-capture Chrome with a Chroma Key filter.
Skipping: use the ⏭ button (or the buttons in Global) to skip the current message or clear the queue. You and your mods can also type !skip or !skipall in chat — handy when the window isn't focused.
Capturing Chrome in the background: Chrome stops drawing windows that are minimized or fully covered, which freezes the overlay on stream. Keep the Chrome window visible somewhere (a corner of your second monitor works), don't minimize it, and launch Chrome with these flags for good measure:
--disable-backgrounding-occluded-windows --disable-renderer-backgrounding --disable-background-timer-throttling
(right-click your Chrome shortcut → Properties → add them to the end of Target). This page also plays a silent keep-alive tone once connected so Chrome doesn't throttle its timers.
ElevenLabs voices
If you have an ElevenLabs account you can add your API key here. Your key is saved only in this browser and sent straight to ElevenLabs — never through anything else. Once voices are loaded, pick "ElevenLabs" as the engine on any speaker above.