Discord Reactive Images lets a voice-call participant appear on stream as a PNG avatar that changes when they speak. It is useful for podcasts, multiplayer streams, tabletop sessions and collaborations where several people need distinct on-screen avatars without webcams.
This guide uses the official FugiTech service and a browser source in streaming software. It covers the two PNG states you need, account connection, source setup, testing and common problems.
What is a reactive PNG?
A reactive PNG is an ordinary PNG image used in a setup that changes what viewers see when a person speaks, stays quiet or triggers another state. The file itself is not animated and “reactive PNG” is not a special image format. The reaction comes from software or a browser service switching between separate images.
A basic voice-call avatar normally needs two transparent files: idle with the mouth closed and speaking with the mouth open. A fuller PNGTuber setup can add blinking versions of both states. Keeping the canvas size, character position and crop identical prevents the avatar from jumping when the service switches images. The beginner PNGTuber guide explains how the four-state model works.
What Discord Reactive Images does
The service connects voice activity from Discord to images shown in a browser source. A participant normally has an idle image and a speaking image. When that person talks in the connected voice call, the displayed state changes.
This differs from Veadotube Mini. Veadotube usually reacts to a microphone selected on the local computer, while Discord Reactive Images is built around participants in a Discord voice context. The second option is especially helpful when guests are joining from different locations.
What you need
- A Discord account and access to the voice channel you plan to use.
- Streaming software that supports browser sources.
- An idle PNG with the mouth closed.
- A speaking PNG with the mouth open.
- Permission from guests to display their avatars on the broadcast.
Transparent PNG files are the easiest to place over a stream layout. Keep the idle and speaking images at the same dimensions, with the character in exactly the same position.
Create the reactive PNG states
The Free PNGTuber Maker creates four consistent character states. For a basic Discord reactive image, use the open-eyes idle state and the open-eyes speaking state. You will also have blinking states available for Veadotube or another compatible workflow.
Describe the character, choose a style and framing, then use the optional pose and emotion field for the performance direction. Once generation finishes, download the character pack and keep the PNG files together.
Create your reactive PNG character →
Connect to the official service
Open Reactive by FugiTech and use its Discord login. Check the domain before authorizing the connection and review the permissions shown by Discord. Interface labels and available layout options can change, so follow the wording displayed by the current version.
Configure the inactive and speaking images for the participant or layout you want to show. The service then provides a browser-source URL or equivalent output for streaming software.
Treat that source URL as private. Do not post it in screenshots, public chat or downloadable scene collections. If you expose it accidentally, return to the service and replace or revoke the source when the current interface allows it.
Add the reactive image to OBS
- Open the scene where the avatar should appear.
- Add a new Browser Source.
- Paste the URL supplied by the official reactive-image service.
- Set a canvas width and height large enough for the layout.
- Resize and position the source inside the scene.
Exact Browser Source settings depend on the layout and your stream resolution. Start with a generous source canvas rather than stretching a tiny one. Crop unused space inside the scene only after every participant appears correctly.
Add Discord Reactive Images to Streamlabs Desktop
Streamlabs Desktop can use the same private FugiTech output through a Browser Source. You do not need to create another character set or reconnect a different Discord account simply because you changed streaming software.
- Open the Streamlabs scene where the reactive PNGTuber should appear.
- Select Add Source and choose Browser Source.
- Create a new source and paste the private URL supplied by Reactive by FugiTech.
- Set a width and height large enough for the complete participant layout.
- Position the browser source and test each participant in the intended Discord voice channel.
Keep the source URL private in Streamlabs just as you would in OBS. Do not reveal it in scene exports, screenshots, tutorial recordings or public support messages. Streamlabs interface labels can change between versions; use its official Streamlabs Desktop setup guide when current labels differ.
The reactive image is blank in Streamlabs
Confirm that the complete URL is present, refresh the Browser Source, and verify that the expected Discord participant is connected to voice. Test the same private URL in a fresh Browser Source before changing image files or reconnecting every participant.
Test the voice reaction
Join the intended Discord voice channel and make a short private recording before going live. Ask each participant to speak one at a time. Confirm that the correct avatar changes state and that silent participants return to their inactive image.
Then test two people talking at once. A group layout should remain readable during overlap, especially if the show involves frequent conversation rather than turn-based speaking.
Common problems
The browser source is blank
Reload the source, confirm that the URL was copied completely, and check that the Discord account is connected to the expected voice context. Also verify that the streaming software can access web content through its Browser Source.
The avatar never changes when somebody speaks
Confirm that the participant is in the expected voice channel and that Discord detects their voice. Check mute, input device and voice-activity settings before rebuilding the stream scene.
The character jumps between states
The two source images probably have different canvas sizes or character placement. Use a matched idle and speaking pair with the same crop and silhouette position.
The image is cropped
Increase the Browser Source canvas or inspect the current layout settings on the reactive-image service. Avoid enlarging the image source itself until the full avatar is visible.
The wrong participant appears
Recheck the selected participant or generated source on the official service. Give each browser source a clear name inside the streaming scene so it is easier to diagnose later.
Discord Reactive Images or Veadotube Mini?
Use Discord Reactive Images when voice-channel participants need separate reactive avatars in a shared stream. Use Veadotube Mini when you want a local PNGTuber controlled by your own microphone, with four-state blinking support and a portable .veadomini project.
For the local option, follow the Veadotube Mini PNGTuber setup guide. If you are comparing reactive-avatar programs, use the PNGTuber software comparison. If you are still choosing the character format, start with What Is a PNGTuber?
Prepare the images first
Most reactive-image problems are easier to prevent at the asset stage. Create a matched character set, verify the idle and speaking states side by side, and only then add the browser source to the broadcast.
Open the Free PNGTuber Maker to build the reactive states.