Comfy Scenes
An effects maker for Twitch streamers.
This app will monitor your Twitch channel for !commands
using Comfy.js (by instafluff and others). It can play .mp3
files, display visual effects, and interact with Vue.js components.
Included in this app are my stream scenes.
Please FEEL FREE to take these and use them for your own purposes. If you like them, I'd love to hear about what you do with them.
Credit
Uses, and named after, Comfy.js (by instafluff).
Uses Dino Characters by ScissorMarks
Demo
You can see this in use, in the wild, by tuning into the lukeocodes stream on Twitch.
Deploy with Netlify
This can be deployed straight to Netlify, to use in your stream. Just click the button!
Remember to add/edit VUE_APP_CHANNEL_NAME
in your deploy environment to the channel name to connect to.
Current Scenes
/frame-overlay
includes interactive logo on bottom ledge, pet interactions, lava lamp./title-overlay
includes large query string logo and pet interactions./title-overlay?title=brb&subtitle=@lukeocodes
/title-overlay?title=offline&subtitle=@lukeocodes
/title-overlay?title=starting%20soon&subtitle=@lukeocodes
/title-overlay?title=%23hashtag&subtitle=@lukeocodes&background=true
Current Commands and Actions
!rain
Triggers the rainDinos
action, which adds some anonymous dinos to the raid array. The result is spawning some dinos that parachute down the screen.
A raid would do the same, but with usernames visible above the characters, on the scene.
// src/config.js
module.exports = {
// ...
rain: {
action: {
name: "rainDinos"
}
},
}
!kick
Triggers rainDinos
, then petKick
and the hit.mp3
sound effect, then movePetFast
, in that order.
The result is that the pet runs over to me, the streamer, kicks me in the face (complete with sound effect), and runs away fast.
// src/config.js
module.exports = {
// ...
kick: [
{
queue: "pet",
action: {
name: "movePetToMe"
}
},
{
queue: "pet",
action: {
name: "petKick"
},
sfx: {
src: "hit.mp3"
}
},
{
queue: "pet",
action: {
name: "movePetFast"
}
}
],
}
!poke
Triggers movePet
and the pop.mp3
sound effect.
This is just to get the pet moving. It will do this itself (without sound effect) after 150s of inactivity, anyway.
// src/config.js
module.exports = {
// ...
poke: {
queue: "pet",
action: {
name: "movePet"
},
sfx: {
src: "pop.mp3"
}
},
}
!boo
Triggers movePetFast
five times, consecutively.
This makes it look as if you've scared the pet and it is running around like a headless chicken. Speed is 300px per second, 3 times the normal run speed.
// src/config.js
module.exports = {
// ...
boo: [
{
queue: "pet",
action: {
name: "movePetFast"
}
},
{
queue: "pet",
action: {
name: "movePetFast"
}
},
{
queue: "pet",
action: {
name: "movePetFast"
}
},
{
queue: "pet",
action: {
name: "movePetFast"
}
},
{
queue: "pet",
action: {
name: "movePetFast"
}
}
],
}
!dave
Triggers petDave
, switching the character.
// src/config.js
module.exports = {
// ...
dave: {
action: {
name: "petDave"
}
},
}
!greg
Triggers petGreg
, switching the character.
// src/config.js
module.exports = {
// ...
greg: {
action: {
name: "petGreg"
}
},
}
!blue
Triggers petBlue
, switching the character.
// src/config.js
module.exports = {
// ...
blue: {
action: {
name: "petBlue"
}
},
}
!mort
Triggers petMort
, switching the character.
// src/config.js
module.exports = {
// ...
mort: {
action: {
name: "petMort"
}
},
}
!biggly
Triggers petGetBiggly
, increasing the size of the pet by 4rem every time.
// src/config.js
module.exports = {
// ...
biggly: {
action: {
name: "petGetBiggly"
}
},
}
!shrink
Triggers petShrink
, resetting the size of the pet to the default 4rem.
// src/config.js
module.exports = {
// ...
shrink: {
action: {
name: "petShrink"
}
},
}
!bulb #00ff00
Triggers changeBulb
and the switch.mp3
sound effect, changing the color of the logo!
Can we used with any hex or rgb color code. i.e. #00ff00 or rgb(0,255,0).
// src/config.js
module.exports = {
// ...
bulb: {
action: {
name: "changeBulb"
},
sfx: {
src: "switch.mp3"
}
},
}
!resetbulb
Triggers resetBulb
and the switch.mp3
sound effect, changing the color of the logo to the standard colors.
// src/config.js
module.exports = {
// ...
resetbulb: {
action: {
name: "resetBulb"
},
sfx: {
src: "switch.mp3"
}
},
}
!off
Triggers lightsOut
and the switch.mp3
sound effect, turns the neon logo off (just a bevel'd grey logo like the bulb is off).
// src/config.js
module.exports = {
// ...
off: {
action: {
name: "lightsOut"
},
sfx: {
src: "switch.mp3"
}
},
}
!on
Triggers lightsOn
and the switch.mp3
sound effect, turns the neon "on" restoring the glow with the colors set by the !bulb
commands.
// src/config.js
module.exports = {
// ...
on: {
action: {
name: "lightsOn"
},
sfx: {
src: "switch.mp3"
}
},
}
!pop
Triggers the pop.mp3
sound effect.
// src/config.js
module.exports = {
// ...
pop: {
sfx: {
src: "pop.mp3"
}
},
}
!drop
Triggers the drop.mp3
sound effect.
// src/config.js
module.exports = {
// ...
drop: {
sfx: {
src: "drop.mp3"
}
},
}
!grounded
Triggers the grounded.mp3
sound effect, featuring the Bald Bearded Builder.
// src/config.js
module.exports = {
// ...
grounded: {
sfx: {
src: "grounded.mp3"
}
},
}
!energize
Triggers the transport.mp3
sound effect.
// src/config.js
module.exports = {
// ...
energize: {
sfx: {
src: "transport.mp3"
}
},
}
!absolutely
Triggers the absolutely.mp3
sound effect. Everything is better with Drag Race.
// src/config.js
module.exports = {
// ...
absolutely: {
sfx: {
src: "absolutely.mp3"
}
},
}
!look
Triggers the look.mp3
sound effect. Everything is better with Drag Race.
// src/config.js
module.exports = {
// ...
look: {
sfx: {
src: "look.mp3"
}
},
}
!vonage
Triggers the vonage.mp3
sound effect and displays the Vonage logo on stream.
// src/config.js
module.exports = {
// ...
vonage: {
sfx: {
src: "vonage.mp3"
},
vfx: {
src: "vonage.png",
ttl: 5000,
pos: "topright",
animation: "flicker"
}
},
}
Project Setup
Created with vue create
, this app can be installed with yarn or npm, then run serve
to start it locally.
npm install
Compiles and hot-reloads for starting locally
VUE_APP_CHANNEL_NAME=<your-channel-name> npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint