Skip to content projects

Overlays

Alerts and scenes for Twitch
svelte
svg
figma
gsap
Visual of the project Visual of the project

Overview

starting soon scene for Twitch stream

An ever evolving project. Different OBS browser layers and scenes that interact with Twitch. A mix of CSS, Svelte transitions, and GreenSock animations.

Designed and developed while live streaming and building in public.

Highlights

Alerts

1
Twitch raid alert showing Samurai Champloo ducking in field

Fully personalized alerts and chat commands using ComfyJS to interface with Twitch api. Svelte stores allow for a easy state management alert animations and sounds.

Chat

2
Chat overlay example showing messages from users

Custom CSS themes for showMy.chat to match interface design system. Theme to only display emotes, for floating on interface.

Animation

3
Synthwave car driving into a moon that looks like a brain

Animated chat messages and user commands that send alerts. Combined GreenSock and SVG in Svelte for animated scenes and custom notification alerts.

Learned

Streaming hardware and software. The in and outs of the OBS application and how Twitch works. Using different browsers and web pages to overlay and create different scenes. How to code in front of others.

Check out the code repo or view the active demo.