2026 Update: Discord Streamkit Reactive Images is no more more
The old CSS to edit Discord Streamkit reactive images is dead! During testing, we found that the images will force-update themselves to default to your Discord Avatar. This is a huge shame on the part of the Streamkit’s customization, so instead of using the Streamkit we recommend trying this alternative:
This tool works by automatically detecting when you’re in a call– It seems to have its own application that requires you to connect your Discord account. Once you give this tool access and join a channel with a friend, the app will recognize them for future calls.
Use the Library tab to create a set of images for idle/talking states. You will be able to set your own avatar this way.
Use the Sources tab to create Custom Sources where you can choose from your Library to assign avatars for people in the group. It’s a bit obscure, but it seems to be the only working alternative at this time.
OBS 28+ and the Discord Streamkit
Everything seems to have broken all at once! RIP Discord Streamkit customization.
Interestingly, the Streamkit from Discord has had its own updates in tandem with OBS 28 launching, causing a lot of parallel issues. We’ve updated the existing talksprite guide with the new selectors, so we figure it’s also an apt time to talk a bit more about CSS code and the Selectors that changed and caused all of these silly issues.
Inside of CSS, we have Styles that control how things look on a page, and so the Selectors are what receive the styling. Selectors are the building blocks where Styles are the paint, so knowing that they moved the Selectors can help explain why the customizations, our talksprites, stopped working. Using new Selectors isn’t always a situation of swapping out the old ones, since the attributes inside may change as well!
Using this new snippet, you can replace your Discord ID (which is NOT your username! Be careful to make sure streamer mode isn’t enabled, so you can copy your ID) and the other placeholder info, while leaving the “quotes” and other symbols around them:
li[class*="State"] :not(img[src*="DiscordUUID"]) { display:none; }
img[class^="Voice_avatar"]{
content:url("IdleImageURL");
height:auto !important;
width:95% !important;
border-radius:0 !important;
filter: brightness(100%);
}
img[class*="Voice_avatarSpeaking"] {
border-color:rgba(0,0,0,0) !important;
position:relative;
animation-name: speak-now;
animation-duration: 1s;
animation-fill-mode:forwards;
filter: brightness(100%) ;
}
@keyframes speak-now {
0% { bottom:0px; content:url("SpeakingImageURL");}
15% { bottom:10px; content:url("SpeakingImageURL"); }
30% { bottom:0px; content:url("SpeakingImageURL"); }
100% { bottom:0px; content:url("SpeakingImageURL"); }
}
/* if not using image keyframe, remove content:url(); */
il[class*="State"]{ position: static; text-align: center;}
div[class*="user"]{ display: none; }
body { background-color: rgba(0, 0, 0, 0); overflow: hidden; }For a fuller tutorial, you can read more in our first post about PNGtubers here, and use the generator to make your code. For a closing tip, Procreate is a great program for making a PNGtuber since it preserves the size of your art layers, which will help you with aligning the character in its idle and talking states– if you don’t have the same image size or positioning, your talksprite will appear to jump around!
We hope you’re inspired, and if you ever need to ask questions then find us in Grif’s Discord and share your stuff.
While you are here, consider adding a Scamagotcha to your stream setup.
