Wildcat Chat Overlay

Overview

The Wildcat Chat Overlay is a highly customizable chat widget designed specifically for streamers to use inside OBS. No login or extensive setup is required; you simply add the URL as a Browser Source in OBS and configure everything on the screen through the settings panel. It natively supports both Twitch and YouTube Live chat.

Get Started with the Chat Overlay

Platform Support

The chat overlay connects to various streaming platforms. You can configure your target platform from within the configuration panel in OBS.

Customization & Themes

The chat overlay includes powerful aesthetic customization tools. You can change fundamental styling directly through the config menu.

Configuring in OBS: The browser source URL only loads the overlay. All chat settings (channel, theme, colors, fonts, etc.) are configured inside OBS:
  1. Right-click -> interact, or click the Interact button with the browser source selected in the monitor/preview.
  2. In the interaction window:
    • Enter your Twitch channel name and click "Connect".
    • Hover over the chat and click the settings gear () to customize appearance (themes, colors, fonts, etc.).
  3. Settings are saved automatically within OBS for that specific source.

Automatic AI Themes

One of the most powerful features of the Wildcat Chat Overlay is its natural-language AI theme generator. Inside the config panel, simply type a description of the vibe, mood, or aesthetic you want (e.g., "cyberpunk neon night," "cozy wooden cabin in the snow," "vintage 90s vaporwave"). The overlay will intelligently generate the corresponding CSS variables, adjust the color palettes for ideal contrast, and apply the theme live!

Color Customization

You have full control over the color of every element in the chat overlay. Since standard color picker dialogs don't work inside the OBS browser source, all colors are set by entering hex codes directly (e.g. #FF5500). Each color setting also provides preset buttons with dynamic color swatches so you can see your current scheme at a glance.

Tip: You can search Google for "color picker" to use a built-in interactive color picker tool, then copy and paste the resulting hex codes directly into the settings fields.

Available Color Settings

Animations

Chat message entry and exit animations use the Web Animations API for smooth, performant transitions. In window mode, new messages glide into view using a CSS clipping-based offset animation on the entire message list, avoiding per-element height animations that can cause jitter during busy chat. In popup mode, messages animate in and out with height and opacity transitions.

Reduced Motion Support

The overlay respects the system-level prefers-reduced-motion setting (e.g. the "Reduce motion" option in macOS Accessibility settings). When enabled, entry animations are disabled for window-mode messages and popup transition durations are minimized, providing a calmer viewing experience.

Config Panel Features

All of the modifications and customizations are handled directly using the on-page settings menu. In OBS, right-click the Browser Source and select Interact to open the menu. The options include:

Chat Scene Creator

The Chat Scene Creator allows you to manage multiple instances of the chat overlay (e.g., one layout for "Just Chatting" and a different one for "Gaming").

Note on statelessness: The Chat Scene Creator acts only as a URL generator. When you create a new scene (e.g., "GamingScene"), it simply generates a unique URL parameter: chat.html?scene=GamingScene.

All aesthetic configurations and connection options are saved locally in the OBS Browser Source's cache, not on our servers. Therefore, you must configure the chat from within OBS by right-clicking it and selecting Interact. Changes to one scene (one specific parameter) will not affect the settings saved under a different URL parameter.

OBS Setup Instructions

Follow these thorough instructions to successfully install the chat overlay in your streaming software.

  1. In OBS Studio, find the Sources panel, click the + button, and select Browser.
  2. Name your source something recognizable (e.g., "Twitch Chat - Windowed").
  3. Paste the URL generated from the Chat Scene Creator into the URL field. If you cannot paste: Ensure the "Local file" option is unchecked first.
  4. Under the Width and Height properties, set Width to 320 and Height to 600 (This size is highly recommended for readability).
  5. Click "OK" to add the browser source to your overlay canvas.
  6. Configuring the Chat: Right-click the Browser Source you just made and select Interact.
  7. In the interactive window, enter your channel information, select your preferences by clicking the gear icon () on the top-right, and hit "Connect".

Advanced OBS Tips