Reactive Images for Streaming

Please right click and copy the header links below to share!

Table of Contents

Fugi Reactive | Stream Kit | VTuber Mentions

Fugi Discord Reactive Images

There are two primary ways to setup reactive images. Firstly, and especially if you want to easily handle more than one person such as for a group stream, you can take a look at Fugi’s Discord Reactive Images (https://reactive.fugi.tech/). This is relatively straightforward, but if you need some extra instructions view the video below.

1. Click the Fugi link provided above, and log into your main Discord account.
2. Config (left side) -> Check mark: Bounce effect, Dim own inactive image, Cross-fade effect, and Dim others inactive image.
3. Images (right side) -> Upload your images, and click the blue “SAVE” button under both.
4. Copy either the group or individual browser sources. You can give your individual link to your collab group or you can have everyone join a call on Discord and their individual sources will appear on the Fugi website with yours.
5. Add a Browser Source into OBS/streamlabs under your “Sources” panel. Paste either the “Group Browser Source”, or “Individual Browser Source” if you wish to resize each image to your liking.

Stream Kit Reactive Images

Alternatively, and if you are looking for more fine tuned control, you can follow the instructions below. This will require a bit more legwork.

First, you will want to setup Stream Kit (https://streamkit.discord.com/overlay). Select the server you’ll be talking in voice chat. Copy the URL this generates and add a new Browser Source for the URL you created.

Second, we need to enable Developer Mode on Discord. This allows us to easily copy user IDs. Navigate to User Settings > App Settings > Advanced > Developer Mode and toggle it on.

Third, we can now obtain User IDs by right-clicking our target’s icon/name and clicking “Copy ID”.

Fourth, you can send an image anywhere in Discord and right-click the image and click “Copy Link” for the image’s URL. Do not expand the image before you copy the link, because it gives you a different URL that is not valid for this code. You can also use an image from elsewhere, if it is publicly accessible on the internet.

Now that you have this data that I didn’t tell you where to paste, you can generate the code required to use this method of reactive image. Replace ID-HERE with the User ID you copied. Replace NOT-SPEAKING-IMAGE with your image URL. Replace SPEAKING-IMAGE with your other (or the same) image URL. You can alter how dark the image is when you are not speaking by changing the bold 50% below to another value (0 <– darker / brighter –> 100).

li.voice-state:not([data-reactid*="ID-HERE"]) { display:none; }
.avatar {
content:url(NOT-SPEAKING-IMAGE);
height:auto !important;
width:auto !important;
border-radius:0% !important;
filter: brightness(50%);
}

.speaking {
border-color:rgba(0,0,0,0) !important;
position:relative;
animation-name: speak-now;
animation-duration: 1s;
animation-fill-mode:forwards;
filter: brightness(100%);
content:url(SPEAKING-IMAGE);
}

@keyframes speak-now {
0% { bottom:0px; }
15% { bottom:10px; }
30% { bottom:0px; }
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:40%; bottom:5%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

Finally, you can copy and paste this data into OBS. Open up the Browser Source you created and copy your edited version of the code into the “Custom CSS” section of the Browser Source. This can work for more than one user such as for collabs by copying the same code but with another users ID/images (for a more streamlined collab experience, check out Fugi’s site at the top of the page). Please note you can tweak this code further at your own discretion in a variety of ways, but don’t ask me how to do any of that. I’m just a messenger.

VTuber Mentions

Some odds and ends I’ve come across that could be helpful for some.

Veadotube – A free to use (at least the mini version) 2D solution for those looking to use an easy-to-setup pngtuber/giftuber/etc.

VNyan – A free to use 3D solution for those looking for a more fun way to interact with their 3D models. Offers many features, integrations, and additional customization.

Ping.gg – Paid low latency video solution for better model sharing. Mostly noting this for my own reference, Fugi recommended if Discord isn’t doing you justice.

Fin!