Building Interactive Twitch Overlays

Why? permalink

Why not? 😅

Where we're at permalink

• Set up new next.js app with create-next-app
• Set up deploy task to send straight to netlify.

            json
            Copy
          {
  "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).

            javascript
            Copy
          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 to addComponents.

            javascript
            Copy
          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