How to Do a Discord-based Talksprite PNGTuber Thing

Works 4 guests too!!

Step 1: Upload your talkprite pngs to Discord.

You will need 2 separate images: One for mouth open (talking) and one for mouth closed (not talking).
Just put them in any channel.
Right click and Copy Link for each image.
Hold onto these you will need them later- paste them in a text doc or something.

Step 2: Get your Discord ID.

Go into your Discord Settings > Advanced > Turn on Developer Mode.

Once that's on, go to the user list for your server, right click the user you are setting up a talksprite for, and click Copy ID

Hold on to this ID you will need it in a second.

Step 3: Adjust the Code.

Now it is time to use the things you are holding. Edit the code below.
Replace DiscordIDGoesHere with the Discord ID you copied.
Replace NotTalkingSpriteGoesHere.png with the url for your Not-talking sprite (mouth closed).
Replace TalkingSpriteGoesHere.png with the url for your Talking sprite (mouth open).
Now forget about the things you were holding before and hold on to this edited code instead.

/* Change URL if not working- https://streamkit.discord.com/overlay */

li.voice-state:not([data-reactid*="DiscordIDGoesHere"]) { display:none; }
.avatar {


/*NOT TALKING SPRITE*/

content:url(


NotTalkingSpriteGoesHere.png

);


  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
  filter: brightness(100%); 



}

.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%);


/*TALKING SPRITE*/

content:url(

TalkingSpriteGoesHere.png

);



}

@keyframes speak-now {
  0% { bottom:0px;  }
  15% { bottom:4px;  }
  30% { bottom:0px;  }
}

li.voice-state{ position: static; }
div.user{ position: absolute; left:-40%; bottom:-10%; }

body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

There are a few other things you can adjust if you want:

Change the brightness% underneath the not talking sprite url if you want the image to "dim" when you're not talking.
Change the 4px after 15% at the bottom to 0px to remove the bounce when you talk (or increase the number to make the bounce bouncier)

Step 4: Set up Streamkit

Go to the Streamkit site and click install for OBS.
Go to Voice Wiget
Set your Server and Voice Channel.
Copy the Widget URL and hold on to it!!

Step 5: Create your Browser Source

Now it is time to use the Code and Widget URL that you are holding.
Create a new browser source in OBS.
Set the URL to your StreamerKit Widget URL.
Set the Height and Width to the dimensions of your talksprite image.
Delete anything in the CSS box and paste your edited code in here.

And that's it!
Everything should work now!
If you want to add multiple talksprites for multiple users, just create an individual browser source (step 5) and repeat steps 1-3 for each user/talksprite.

You should be using the same StreamerKit URL on every Browser Source
You'll pretty much only need to change the Discord ID and the talksprite URLs