Building Interactive Twitch Overlays
Why? permalink
Why not? 😅
Where we're at permalink
- Set up new
next.js
app withcreate-next-app
- Set up
deploy
task to send straight tonetlify
.
{
"predeploy:prod": "next build && next export",
"deploy:prod": "netlify deploy --prod"
}
- Pulled in TailwindCSS
- Created basic side and bottom bar. Created
@keyframes
extension to animate them out from where the webcam will be positioned(for now).
extend: {
animation: {
'scale-x': 'scale-x 1s both',
'scale-y': 'scale-y 1s both',
},
keyframes: {
'scale-x': {
'0%': { 'clip-path': 'inset(0 0 0 100%)' },
'100%': { 'clip-path': 'inset(0 0 0 0)' },
},
'scale-y': {
'0%': { 'clip-path': 'inset(100% 0 0 0)' },
'100%': { 'clip-path': 'inset(0 0 0 0)' },
},
},
},
- When the scene loads, the bars scale in with a clip.
- Explored letting users change the banner color with commands such as
!hue 280
. - That required setting up a
plugin
toaddComponents
.
plugin(function ({ addComponents }) {
const components = {
'.bg-hue': {
background: 'hsl(var(--hue, 0), 80%, 50%)',
},
}
addComponents(components)
}),
- Set up a
GSAP
tween to animate through the hues as a POC with!overlayParty
. Looked quite cool. But, I think we will try to match the party bars used on the bear animation for!party
.
Look At permalink
- fdgt.dev was shared in the chat as a good resource for testing out the things being built.
- Have a think about how the overlay could respond to different commands.
- Pull down sub/follow data from Twitch API
Current Stack permalink
- Tailwind
- Next.js
- GSAP
- Comfy.js