How to Create Discord Reactive Images

Making streaming more interesting and visually interesting on sites like Twitch is becoming more and more popular. Adding Discord Reactive Images to your broadcasts is a good way to do this. Streamers who talk to each other in group chats on Twitch or other sites often use Discord calls to talk. In this article we talk about how to create Discord Reactive Images.

You can improve this interaction by making the avatars of the speakers respond to what is being said if you know how to do it. Discord Reactive Images let icons light up, change, or move along with the speaker, which makes the conversation more interesting. You’ll need Discord, OBS (Open Broadcaster Software), and the online photo editing Kapwing to set this up.

If you follow a few easy steps, you can add animated avatars to your streaming content to make it more interesting to look at. This will also make your Discord calls more fun for everyone. Adding these dynamic elements to your content, whether you’re a seasoned streamer or just starting out, can make it much more interesting and fun for viewers.

What are Reactive images?

Discord Reactive images are a way to add dynamic, animated avatars to your Discord voice chat experience. These avatars react to your audio input, essentially “coming alive” when you speak, adding a layer of visual engagement and personality to your voice interactions. If you want to learn more, than you can visit official website.

Here’s how they work

• Two-image setup: You need two PNG images of your avatar – one in a “resting” state and one with some kind of active, talking expression.
• Software magic: Tools like “Reactive by FugiTech” or “Streamlabs OBS” use your microphone input to trigger the switch between these images seamlessly, creating the illusion of animation.
• Customization: You can adjust the sensitivity, animation speed, and even add additional effects to enhance the responsiveness and expressiveness of your avatar.

How to create Discord Reactive Images

Make and add Fugi’s Images That Respond to Discord

1. Launch Discord on your computer and install OBS Studio, a free app for everyone.
2. Click the cog icon next to your username in Discord to go to Settings.
3. In the Settings window, go to Advanced from the left panel and enable Developer Mode in Advanced.
4. Scroll left to Voice & Video, then Voice settings, and choose the right microphone. Switch to OBS Virtual Camera in Video Settings.
5. Click Login with Discord at reactive.fugi.tech. Enter your credentials or scan the QR code to log in and click Authorize.
6. Configure reactive images on the redirected page. For an avatar, you need two images: one with a closed mouth and one with an open mouth. Once you have these images, click Plus (+) and upload speaking and inactive images. Finally, click Save.
7. Copy the generated link after configuring the image.
8. Click the Plus (+) icon from Source in OBS Studio, then Browser > Create new, enter the source name, and OK.
9. Paste the copied link into Properties > URL and click Ok. You can change the image size before starting the Discord stream.
10. OBS’s “Start Virtual Camera” under “Controls” allows Discord streaming.
11. Finally, open Discord, select a voice channel, and turn on the camera.

Custom CSS with Discord’s StreamKit Overlay

1. 1. Visit streamkit.discord.com.
   • Choose Install for OBS or Install for XSplit depending on your streaming software.
   • Discord login will be required if you haven’t already. Open Discord first.
2. 2. In Voice Widget:
   • Choose your server and voice channel from the dropdowns.
   • Select Hide Names in Discord calls to hide your username.
   • After finishing, copy the URL on the right.
3. 3. On Discord:
   • Authorize in the app.
   • Open OBS, click the Plus (+) icon to add a source from the Sources menu.
   • Go to Browser > Ok, paste the copied URL, and click Ok.
4. 4. Use Discord to:
   • Create a private text channel to save and upload PNG images.
5. 5. Visit CSS generator codepen.io.
   • Click your Discord username in the bottom left corner and select Copy ID.
   • Copy and paste it next to the Discord User ID in the CSS generator.
6. 6. Right-click each PNG image in your Discord channel:
   • Select “Copy ID”.
   • In CodePen, paste the ID next to “Image URL”.
7. 7. Finally, in CodePen:
   • Click Generate CSS to get the CSS code.
   • Then, Copy CSS to copy it.
8. 8. Right-click the StreamKit browser source in OBS:
   • Select Properties.
9. Paste the copied code into Custom CSS.
   • Finally, click Ok.

Benefits of Using Reactive Images on Discord

More participation and interaction:

• Visually appealing: your avatar moves and talks, which makes conversations more interesting.
• Real-time reactions: Your avatar can respond to the way you speak or how you feel, giving your conversations more personality.

Branding and personalization got better:

• Make your style known: An animated avatar lets you do that and makes you stand out from other users.
• Create a brand identity: If you stream or make content, using reactive images can be a fun way to build your brand and make it stand out.

Pros of technology:

• Lightweight and resource-efficient: It’s easier for more people to use reactive images because they are smaller and use fewer resources than full-on VTubing setups.
• Optional customizations: There are a lot of tools and resources that let you make and change reactive images, which lets you be creative and unique.

FAQs