11ty Twitch Scenes

Overview

Twitch Scenes is a setup created using Eleventy and Sass, allowing users to create and customize scenes for their streaming setup. Each scene is accessible through a local server and is optimized for a resolution of 1280x720. The scenes include features such as pre and post-show messages, a main scene with a large capture area and host webcam capture, a guest scene with two large webcam capture areas, a guest-host scene with two webcams and a large display, and a bonus slideshow layout. The scenes also include stream “header” details and embedded chat.

Features

• Customizable stream meta data and allowed chat commands
• Optimized scenes for pre and post-show messages, main scene, guest scene, and guest-host scene
• Stream header details and embedded chat in all scenes
• Optional slideshow template for stream presentations
• Gradients used in styles to create transparent areas for additional stream elements
• Capture areas specified for different scenes
• Included scripts and styles for handling chat, commands, and subscriptions

Installation

1. Clone the Twitch Scenes repository and navigate to the project directory.
2. Customize the stream meta data, including allowed chat commands, in the /src/_data/stream.js file.
3. Run npm start to launch the scenes at http://localhost:8090/. (You can customize the port by modifying the watch:eleventy script in the package.json file)
4. To add captions, use OBS (not Streamlabs) and the OBS Captions Plugin.
5. To add a new scene, create a new class in the Sass file that matches the scene file slug and apply styles to the <main> element.

Summary

Twitch Scenes is a setup built using Eleventy and Sass, allowing users to create and customize scenes for their streaming setup. It provides an easy way to set up pre and post-show messages, custom capture areas, and embedded chat functionality. The scenes are optimized for a resolution of 1280x720 and can be easily customized to match the user’s branding. With the included scripts and styles, users can also handle chat commands and new subscriptions.