{"id":15016525,"url":"https://github.com/5t3ph/11ty-twitch-scenes","last_synced_at":"2025-09-11T14:15:50.873Z","repository":{"id":52517263,"uuid":"353202046","full_name":"5t3ph/11ty-twitch-scenes","owner":"5t3ph","description":"A slim 11ty + Sass setup to get started creating custom Twitch scenes, including responding to chat commands with ComfyJS.","archived":false,"fork":false,"pushed_at":"2021-06-06T13:21:53.000Z","size":4740,"stargazers_count":40,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-31T11:51:31.287Z","etag":null,"topics":["11ty","11ty-starter","11ty-template","comfyjs","twitch-streamers","twitch-streaming"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/5t3ph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-31T02:35:39.000Z","updated_at":"2024-03-13T20:37:31.000Z","dependencies_parsed_at":"2022-09-06T16:01:19.573Z","dependency_job_id":null,"html_url":"https://github.com/5t3ph/11ty-twitch-scenes","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":"5t3ph/11ty-sass-skeleton","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2F11ty-twitch-scenes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2F11ty-twitch-scenes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2F11ty-twitch-scenes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2F11ty-twitch-scenes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5t3ph","download_url":"https://codeload.github.com/5t3ph/11ty-twitch-scenes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223510342,"owners_count":17157306,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","11ty-starter","11ty-template","comfyjs","twitch-streamers","twitch-streaming"],"created_at":"2024-09-24T19:49:01.891Z","updated_at":"2024-11-07T12:03:51.535Z","avatar_url":"https://github.com/5t3ph.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Twitch Scenes\n\n\u003e This setup is created using Eleventy and Sass, and each scene is available from `http://localhost:8090/[scene-name]`\n\n_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\u0026A about his stream setup._\n\n\u003e Now available: An egghead course that walksthrough the essential steps of how this comes together (requires membership) - **[watch the course \u003e](https://5t3ph.dev/ets)**\n\n**Scenes are optimal at `1280x720`**, and are included for:\n\n- Preshow, postshow, and break messages\n- Main scene with large capture area and host webcam capture\n- \"guest\" scene with two large webcam capture areas\n- \"guest-host\" scene with two webcams and large display\n- bonus slideshow layout\n\nAll scenes include the stream \"header\" details, which also features embedded chat.\n\n**[Check out the scene previews below](#scene-previews)** ⬇️\n\n## Initial Stream Setup\n\nCustomize the stream meta data including allowed chat commands within `/src/_data/stream.js`.\n\n**Run `npm start` to launch the scenes** at `http://localhost:8090/` (or customize the port within the package `watch:eleventy` script).\n\n### Adding Captions\n\nPreviously 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).\n\n## Scene Anatomy\n\nA scene specific class is generated as `scene-[fileslug]` on the `\u003cmain\u003e` element.\n\n- The `index` maps to the `primary` Sass file\n- `postshow`, `preshow`, and `break` use the `fullscreens` Sass\n- the remaining `/scenes/` map to the Sass file matching the file slug\n\nIf you add a scene, you will need to add a CSS style to it's new class to apply styles to `\u003cmain\u003e` unless you want the entire area to be a capture area.\n\nThe `preshow` layout is an example of passing content to be included within `\u003cmain\u003e`.\n\n### Scene Styles\n\nThe 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.\n\nThe basic colors are passed in from CSS custom properties defined in `_layout.scss`.\n\n\u003e 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\n\n### Extra Resource: Slideshow\n\nNot an official scene, but a template you can use if you want to create a simple slideshow presentation as part of your stream.\n\nUses the [CSS feature of scroll snapping](https://smolcss.dev/#smol-scroll-snap) to create a full-screen slideshow.\n\nTo 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).\n\n### Capture Areas\n\nIn 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).\n\nIn the `host` scene, the center of the radial gradient is the capture area.\n\n## Command Reponses\n\nScripts 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).\n\nYou must provide your `twitchUsername` within `/src/_data/stream.js` and at least one `chatCommand` for this to work.\n\nTo modify behavior:\n\n- edit `_includes/comfy/commands.js` to alter the ComfyJS scripts\n- edit `sass/_commands.scss` to modify the appearance of command words\n\nCommand 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.\n\nIf you keep the provided style, it's best to keep command words under 5 characters for the best effect.\n\n\u003e Catch the last scene preview to see how the scene would look if chat mobbed the available commands\n\n### Test Chat Commands\n\nVisit `https://www.twitch.tv/popout/[TWITCH USERNAME]/chat?popout=` and enter your chat command - example: `!css` - to test the display.\n\n### Edit Chat Commands\n\nIf you want to enable chat commands, add those within the `stream.js`. Each command will be automatically listed below the CTA in the `header`.\n\n\u003e Fun tip: you can edit these during your stream to add/remove commands live! Perhaps an incentive for chat participation.\n\n### New Subscription \"Thanks!\"\n\nIn 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_.\n\n## Scene Previews\n\n**preshow**\n\nCustomize the message that appears as default in the chat area by updating the `preshowMessage` in the stream data file.\n\n![preshow](scene-previews/preshow.png)\n\n**primary**\n![preshow](scene-previews/primary.png)\n\n**host**\n\nEdit 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`.\n\n![preshow](scene-previews/host.png)\n\n**postshow**\n![preshow](scene-previews/postshow.png)\n\n**break**\n![break](scene-previews/break.png)\n\n**guest**\n![break](scene-previews/guest.png)\n\n**guest-host**\n![break](scene-previews/guest-host.png)\n\n**new subscription reaction**\n![new sub thanks](scene-previews/sub-thanks.png)\n\n**command demo**\n![commands](scene-previews/commands.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2F11ty-twitch-scenes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5t3ph%2F11ty-twitch-scenes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2F11ty-twitch-scenes/lists"}