Reactive Avatar Tutorial: Voice Activated & Animated Discord Chat On Your Live Stream

Introduction

Today we're diving into a fun and interactive tool that can elevate your live stream: Reactive by FujiTech. This tool enables you to animate the voices in your Discord voice chat and integrate them seamlessly into OBS, offering more dynamic and engaging interactions than Discord's default who's talking display. In this tutorial, we'll walk you through setting up the tool, customizing your profile pictures, and adding some animated flair to your stream.

Getting Started with Reactive

Head over to reactive.fuji.tech. Once there, you’ll need to log in with your Discord account by clicking the login button and authorizing access. After logging in, you’ll be greeted by a page with three main sections:

1. Config: This section allows tweaking various appearance and behavior settings.
2. Links: These are the URLs you'll need to copy into OBS.
3. Inactive and Speaking Images: Upload custom images for when you're inactive or speaking.

Configuration Settings

In the Config section, you have various options:

• Include Own Image: Decide if you want your image displayed.
• Bounce Effect: Makes your image bounce when speaking.
• Dim Own Active Image: Dims the image when you’re not speaking.
• Show Names: Displays Discord names.
• Image Alignment: Adjust image positioning.
• Crossfade Effect: Smooth transitioning when speaking.
• Mutual Inactive Image: Dims images of others who aren't speaking.

Other configurations include name size and spacing between images.

Integrating with OBS

To link Reactive with OBS:

1. Copy the "Group Browser Source" URL from the Links section.
2. Open OBS, add a browser source, and paste the URL.
3. Customize the size and positioning as needed.

When you unmute on Discord, your image will appear in the OBS scene, animating as you speak. The images for others will also update dynamically as they join or leave the voice chat.

Customizing Individual Profiles

To customize profile pictures:

1. Copy individual URLs for each participant from the Links section.
2. Adjust their profile images and settings by clicking on the settings icon next to their URL.
3. The changes will reflect immediately in OBS and will be remembered when they rejoin.

You can also localize unique designs, such as making all images circular, and these adjustments will persist across sessions.

Adding Animation to Your Profile

Animated reactions can make streams more fun. Here’s a quick guide:

1. Find an animated GIF (e.g., on Giphy).
2. Use EasyGif to crop the GIF into a square format.
   • Inactive Image: Extract a frame where the character isn't talking.
   • Speaking Image: Use the animated GIF.
3. Upload these images to Reactive under the Inactive and Speaking Images sections.
4. Disable Bounce Effect, Dim Own Active Image, and Crossfade Effect in the Config settings.

Add the individual URL to OBS as a browser source. Your character will now animate when you speak, adding personality to your stream.

Keywords

• Reactive
• FujiTech
• Discord
• Voice chat
• OBS
• Animated avatars
• Live stream
• Customization
• Profile pictures

FAQ

Q: What is Reactive by FujiTech?
A: Reactive is a tool for animating voice chat you can use with Discord, integrating seamlessly with OBS for live streams.

Q: How do I start using Reactive?
A: Visit reactive.fuji.tech and log in with your Discord account.

Q: Can I customize my Discord profile picture in Reactive?
A: Yes, you can customize profile pictures and set unique images for inactive and speaking states.

Q: How do I link Reactive with OBS?
A: Copy the provided browser source URL from Reactive and paste it into a new browser source in OBS.

Q: Is it possible to use animated GIFs in Reactive?
A: Yes, you can upload animated GIFs for your speaking state to create dynamic visuals.