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

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://discord-reactive-images.fugi.tech/). This is relatively straightforward, but if you need some extra instructions view the video below.

Directions: 1) Click the link provided above, and log into your MAIN Discord account. 2) Upload your images, click save. 3) Copy group or individual browser source. Give the link to your collab group to add onto their OBS. 4) Add a Browser Source. Paste link in URL box. Save. Note: Make sure you are in a Discord voice call room. Images will not pop up if someone is not in a VC room.

Stream Kit Reactive Images

Alternatively, and if you are looking for more power over the styling or a higher quality GIF image, you can follow the instructions below. This will require a bit more legwork.

More detailed steps are below.

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.

Navigate to User Settings > App Settings > Advanced > Developer Mode and toggle it on
This should be the same on Browser/Desktop.

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

Right click the user name/icon and click Copy ID
Simple enough.

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.

Fin!