Twitch Scenes Gamified

screenshot of Twitch Scenes Gamified
eleventy
scss

An Eleventy-based Twitch scenes starter with a chat-controlled game! Includes ComfyJS with command responses, and 6 scenes including guest support.

Overview:

The Twitch Scenes product is an Eleventy-based Twitch scenes starter that includes a chat-controlled game. It utilizes ComfyJS with command responses and provides 6 scenes, including support for guest appearances. The scenes are optimized for a resolution of 1280x720 and include features such as pre-show, post-show, break messages, a main scene with a large capture area and host webcam capture, a game scene with dedicated backdrop and instructions, and the ability to highlight chat messages using OBS Interact mode. Each scene also includes stream "header" details and embedded chat.

Features:

  • Chat-controlled game: Allows viewers to interact with the stream through chat commands.
  • 6 scenes: Includes pre-show, post-show, break messages, main scene with capture area and webcam, support for guest appearances, and a dedicated game scene.
  • Optimized resolution: Scenes are designed to be optimal at 1280x720.
  • Embedded chat: All scenes include embedded chat, allowing viewers to engage with the stream.
  • OBS Interact mode: Enables highlighting of chat messages within any scene using OBS Interact mode.
  • Customizable stream setup: Stream meta data, including allowed chat commands, can be customized within the /src/_data/stream.js file.
  • Captions support: Captions can be added using OBS and the OBS Captions Plugin.
  • Customizable scenes: Scene styles can be modified within the src/sass/_scenes.scss file, allowing for customization of appearance.
  • Chat command and subscriber action responses: Scripts and styles are included to handle showing chat and responding to chat commands and subscriber actions using ComfyJS.

Summary:

The Twitch Scenes product is an Eleventy-based Twitch scenes starter that allows streamers to create interactive and engaging streams for their viewers. It includes 6 scenes optimized for a resolution of 1280x720, with features such as embedded chat, support for guest appearances, and a chat-controlled game using ComfyJS. The scenes can be customized and themed to match the streamer's preferences, and installation is facilitated through simple steps. With the inclusion of OBS Interact mode, viewers can even have their chat messages highlighted within any scene. Overall, Twitch Scenes provides a comprehensive solution for streamers looking to enhance their Twitch streams with interactive elements and engaging visuals.

eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.