How to Create Discord Reactive Images

Get rid of the boring picture and learn how to make images in Discord that change based on your voice, chat, and more! Easy steps, beautiful results.

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.

How to create Discord Reactive Images

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 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
    • 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
    • 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

How to create Discord Reactive Images

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.


What is reactive images?

Images that react. Use Discord to sign in. With reactive, it’s easy to see your Discord voice call in OBS using just one browser source. It’s like Discord Streamkit, but you can change it more and it’s easier to use.

How do you put Fugi on Discord?

If you have OBS Studio, select OBS Virtual Camera from the Camera dropdown in Video Settings. Click Login on Fugi’s Reactive website. To authorize the app, sign in to Discord again and grant app permissions.

What program do Pngtubers use?

Free PngTuber Maker helps anyone become a pngtuber in a few easy steps. Use two images to create a pngtuber avatar for livestreaming, recording, or anywhere else. All Reviews: Very Positive (110)—90% of 110 software reviews are positive.

Editorial Staff
Editorial Staff
The Bollyinside editorial staff is made up of tech experts with more than 10 years of experience Led by Sumit Chauhan. We started in 2014 and now Bollyinside is a leading tech resource, offering everything from product reviews and tech guides to marketing tips. Think of us as your go-to tech encyclopedia!


Please enter your comment!
Please enter your name here

Related Articles

Best Telemedicine Software: for your healthcare practice

Telemedicine software has transformed my healthcare visits. It's fantastic for patients and doctors since they can obtain aid quickly. I...
Read more
I love microlearning Platforms in today's fast-paced world. Short, focused teachings that engage me are key. Microlearning platforms are great...
Think of a notebook on your computer or tablet that can be changed to fit whatever you want to write...
As of late, Homeschool Apps has gained a lot of popularity, which means that an increasing number of...
From what I've seen, HelpDesk software is essential for modern businesses to run easily. It's especially useful for improving customer...
For all of our important pictures, stories, and drawings, Google Drive is like a big toy box. But sometimes the...