https://github.com/5t3ph/11ty-twitch-scenes
A slim 11ty + Sass setup to get started creating custom Twitch scenes, including responding to chat commands with ComfyJS.
https://github.com/5t3ph/11ty-twitch-scenes
11ty 11ty-starter 11ty-template comfyjs twitch-streamers twitch-streaming
Last synced: about 1 month ago
JSON representation
A slim 11ty + Sass setup to get started creating custom Twitch scenes, including responding to chat commands with ComfyJS.
- Host: GitHub
- URL: https://github.com/5t3ph/11ty-twitch-scenes
- Owner: 5t3ph
- Created: 2021-03-31T02:35:39.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-06T13:21:53.000Z (over 4 years ago)
- Last Synced: 2024-10-31T11:51:31.287Z (12 months ago)
- Topics: 11ty, 11ty-starter, 11ty-template, comfyjs, twitch-streamers, twitch-streaming
- Language: SCSS
- Homepage:
- Size: 4.52 MB
- Stars: 40
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Twitch Scenes
> This setup is created using Eleventy and Sass, and each scene is available from `http://localhost:8090/[scene-name]`
_If you're new to streaming (I was!) check out [this Learn With Jason episode](https://www.learnwithjason.dev/about-streaming) where Jason does Q&A about his stream setup._
> Now available: An egghead course that walksthrough the essential steps of how this comes together (requires membership) - **[watch the course >](https://5t3ph.dev/ets)**
**Scenes are optimal at `1280x720`**, and are included for:
- Preshow, postshow, and break messages
- Main scene with large capture area and host webcam capture
- "guest" scene with two large webcam capture areas
- "guest-host" scene with two webcams and large display
- bonus slideshow layout
All scenes include the stream "header" details, which also features embedded chat.
**[Check out the scene previews below](#scene-previews)** ⬇️
## Initial Stream Setup
Customize the stream meta data including allowed chat commands within `/src/_data/stream.js`.
**Run `npm start` to launch the scenes** at `http://localhost:8090/` (or customize the port within the package `watch:eleventy` script).
### Adding Captions
Previously this starter included a captions capture area, but captions are now recommended to be fed in properly. These can be added when using [OBS](https://obsproject.com/download) (not Streamlabs) and the [OBS Captions Plugin](https://github.com/ratwithacompiler/OBS-captions-plugin).
## Scene Anatomy
A scene specific class is generated as `scene-[fileslug]` on the `` element.
- The `index` maps to the `primary` Sass file
- `postshow`, `preshow`, and `break` use the `fullscreens` Sass
- the remaining `/scenes/` map to the Sass file matching the file slug
If you add a scene, you will need to add a CSS style to it's new class to apply styles to `` unless you want the entire area to be a capture area.
The `preshow` layout is an example of passing content to be included within ``.
### Scene Styles
The styles use gradients to leave "transparent" areas for extra stream scene elements such as video capture, display capture, and window capture elements to show through.
The basic colors are passed in from CSS custom properties defined in `_layout.scss`.
> Please update the colors, particularly of the gradient border on the `header`, as the ones in this starter are unique to the [ModernCSS.dev](https://moderncss.dev) branding
### Extra Resource: Slideshow
Not an official scene, but a template you can use if you want to create a simple slideshow presentation as part of your stream.
Uses the [CSS feature of scroll snapping](https://smolcss.dev/#smol-scroll-snap) to create a full-screen slideshow.
To use, visit `http://localhost:8090/slideshow` and use horizontal scrolling. You will need to use display capture instead of browser capture so that you can manipulate the screen, or use interactive mode if using OBS (not Streamlabs).
### Capture Areas
In the `primary` scene, the main stream capture area is approximately 1040x550 when streaming at 1280x720 (and if your text content doesn't increase the height of the header area).
In the `host` scene, the center of the radial gradient is the capture area.
## Command Reponses
Scripts and styles are included to handle showing chat, and responding to chat commands and new subscriptions. These are received with the help of [ComfyJS](https://github.com/instafluff/ComfyJS).
You must provide your `twitchUsername` within `/src/_data/stream.js` and at least one `chatCommand` for this to work.
To modify behavior:
- edit `_includes/comfy/commands.js` to alter the ComfyJS scripts
- edit `sass/_commands.scss` to modify the appearance of command words
Command words are given a gradient "sticker" style, and will be positioned randomly across the `main` area of the screen. They will come in with a zoom transition and then zoom back out of view after one second.
If you keep the provided style, it's best to keep command words under 5 characters for the best effect.
> Catch the last scene preview to see how the scene would look if chat mobbed the available commands
### Test Chat Commands
Visit `https://www.twitch.tv/popout/[TWITCH USERNAME]/chat?popout=` and enter your chat command - example: `!css` - to test the display.
### Edit Chat Commands
If you want to enable chat commands, add those within the `stream.js`. Each command will be automatically listed below the CTA in the `header`.
> Fun tip: you can edit these during your stream to add/remove commands live! Perhaps an incentive for chat participation.
### New Subscription "Thanks!"
In the same style of the commands but larger, a `THANKS!` message will zoom in when you receive a new subscription, and zoom back out like the commands. _Scene preview available below_.
## Scene Previews
**preshow**
Customize the message that appears as default in the chat area by updating the `preshowMessage` in the stream data file.
**primary**
**host**
Edit the text directly within the scene. To show only a centered host capture area, remove the `ctas` div in the scene, and remove the `grid-template-areas` within `_host.scss`.
**postshow**
**break**
**guest**
**guest-host**
**new subscription reaction**
**command demo**
