Project Requirements
I wanted a simple, fun, animated BRB screen for my streams, and I wanted to practice my React skills. Livestreaming software like OBS typically allows browser sources for streamed content, so I decided it could be a good project to make a customizable screen that people could use as well.
So, I needed the screen to be:
- Customizable
- Stream-friendly
Customizable
I needed to make the BRB screen customizable, so I opted for basic color customization options and animation modifications. In the future, I may include support for SVG elements, more complex animations, and other features; for now, I just wanted a BRB screen, so that's where I started.
I built a modular color selection component that lets the user modify the background color of the animation, and add, edit, and remove colors for the BRB letters.
I wanted the users to be able to easily modify colors and animations; I built a custom SVG element, so that I could assign mutable values to the different elements and animations. The user can modify the background color of the source window, the animation duration, and gradient color stops for the SVG.
Stream-Friendly
I wanted the user to be able to easily add their new animation to their streaming setups, so I made a basic API that preconfigures GET requests for the BRB screen with URL encoded modifiers. As the user modifies their screen, the source URL gets updated accordingly and is stored in a text input. I used the Clipboard API to make the URL easily copy-pasted as a browser source into the user's preferred streaming platform.
I also included a video demo that users can view to see how to incorporate the screen into their own livestreams.