Add animated characters to OBS: a stream overlay character guide
Add animated characters with a transparent background to OBS Studio and Streamlabs: browser source settings, sizing and performance tips.
A cat napping in the corner of your stream, a butterfly drifting over chat, a little logo bouncing at the edge of your gameplay… An animated character adds personality viewers notice right away. This guide shows how to add animated characters to OBS, keep the background transparent and keep performance low.
The options
- Image or media source: add a GIF or a WebM with alpha directly. Simple and fast, but the character only plays the same loop.
- Display capture + chroma key: possible, but edges rarely come out clean and you risk putting other parts of your desktop on stream.
- Browser source: adds a web page with a transparent background. Characters can walk, sleep and interact, and nothing from your desktop leaks onto the stream.
For characters that behave like they’re alive, a browser source is the cleanest route. ErtePals’ streamer mode gives every character and scene a transparent full-screen page for exactly this.
Add a character to OBS with ErtePals streamer mode
- Build your link — On the ErtePals Streamers page, pick a character or paste a saved scene link, set pet behaviors, size and floor offset, and copy the link. The “Use in OBS” button on character pages copies the same link.
- Add a browser source — In OBS Studio, press + in the Sources panel and choose “Browser”. Give it a clear name like “ErtePals”.
- Enter the link and size — Paste the link into the URL field and set width 1920 and height 1080, or your canvas resolution.
- Keep the background transparent — Remove any rule in the Custom CSS box that sets a background color. The ErtePals page is already fully transparent.
- Position the source — Move the browser source above your other sources. Your characters now live on top of your gameplay and camera.
Same thing in Streamlabs Desktop
Add Source → Browser Source, paste your link in the URL field and set width and height to your stream resolution. The background is transparent, so characters appear right on top of the scene.
Tips for stream overlay characters
- Raise the floor with the floor offset option if you have a lower third or camera frame at the bottom.
- Less is more: one or two characters add personality without pulling attention away from the game.
- Use scenes for different stream types, each as its own browser source.
- Shut down when hidden: OBS’s “Shutdown source when not visible” option saves resources.
- Mind copyright: only use characters you have the right to show. Built-in ErtePals characters and licensed real GIFs are a safe start.
Performance and interaction
A browser source runs as a separate lightweight browser inside OBS. ErtePals streamer mode is a single page that only animates visible characters, so on most PCs the load is negligible. Viewers can’t click characters — they live on their own, walking, napping and, with pet behaviors on, noticing and chasing each other.