Twitch Chat Animated Emotes Wall Overlay

This is a Twitch OBS overlay that displays emotes from Twitch chat. Emotes fly across the screen or stay on screen and pile up. Tested with 1000 emotes on screen at the same time. Emotes first appear from a random location on the screen and randomly move across the screen.

Custom CSS options:
This is custom CSS that you can add to the OBS browser source CSS properties.

Add a drop shadow to emotes


            .latestblock img {
            filter: drop-shadow(5px 5px 15px #00000090);
            }

Flip emotes


            .latestblock img {
            transform: scaleX(-1) !important;
            }

Grayscale emotes


            .latestblock img {
            filter: grayscale(100%) !important;
            }

Pride (rainbow) behind emotes


            .latestblock img {
            border-image: linear-gradient(red, orange, yellow, green, blue, violet) 25% 25% 25% 25% / 40px 40px !important;
            }

Options

Allow BetterTTV Emotes
This will display BetterTTV emotes that have been set for your channel as well as global emotes.

Allow SevenTV Emotes
This will display SevenTV emotes that have been set for your channel as well as global emotes.

Allow FrankerFacez Emotes
This will display FrankerFacez emotes that have been set for your channel as well as global emotes.

Limit (Number of emotes to allow from each message) Emotes

Speed Seconds

Duration Seconds

Default Sizes 28x28, 56x56, 112x112, Random

Custom Size (0 = disabled) px

Effects

Fish Tank Mode Emotes will persist on screen until you refresh the browser source.