Building Interactive Twitch Overlays

Jan 19, 2021
Javascript, Next
Share on Twitter

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
            
          {
  "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
            
          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
            
          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