Creative Engineer
Graphic & motion designer, illustrator, digital painter & developer.

Animals Stream Package

Remember to re-import the widget(s) to see the new changes. 
Make note of any customization, as they will be overwritten.

July 26-2021
Hotfix for long messages without spaces to break lines.
Added option for setting max width of message boxes

Hype Meter

Remember to re-import the widget(s) to see the new changes. 
Make note of any customization, as they will be overwritten.

July 28-2021
Feature added - option to for widget to load visible/hidden when using hide feature (any time other than 0 set)

July 22-2021
Feature added - option to hide widget after X seconds of no new events once it hits 0 progress, reappears again on next new event.

Forsaken Stream Package

Remember to re-import the widget(s) to see the new changes. 
Make note of any customization, as they will be overwritten.

July 20-2021
Alerts have user message added along with TTS support.

Carbon Stream Package

Remember to re-import the widget(s) to see the new changes. 
Make note of any customization, as they will be overwritten.

July 26-2021
Options added to disable/enable specific fullscreen alerts

July 19-2021
Follow alerts added along with option to disable them
Video sync hotfix

July 18-2021
Added options to disable Carbon logo in alerts
Visual artefact at initial load fix

Increasing the scale of SocialPop callouts

So you maybe want to display these SocialPop callouts much larger than the default size, but noticing some blurry edges when scaling up in application?

Or want a bit of higher resolution recording of this to get smoother edges when scaling down in video editing?
Here's a quick trick to scale all callouts through some simple CSS change!

We'll start off with the code, we want to make sure we're scaling it from the top left corner, so it doesn't get 'pushed out' of view and get partially cropped.
transform-origin: left top;

Next, we'll set a transform to do the actual scaling, in this case with a multiplier of 1.5, which would be 150% of the original size

Both these lines should be added to the .cta class inside style.css
(found in assets->css->style.css), open with any text or code editor.

Instructional video on where to to add this code and save.
Like Comment

Snapform gradient customization

Want to have some more color in your life? Let's go over a few customizations you can do with Snapform by overriding some CSS!

We'll start off by opening the style.css file with any editor, which you can find in your Snapform folder at "Social Callouts -> assets -> css"

Now we want to scroll to the very bottom to start adding our overrides.

Main container gradient

The bread and butter of this whole thing, changing the solid container box color to a gradient is done by overriding with the following line.
.nortification{background: linear-gradient(110deg, #04e84a 20%, #3972e5 90%)!important;}
#04e84a is the start color and #3972e5 is the end color.
 110deg is the angle the gradient is at, in this case it's tilted from top left

This yields us a result something like this


Icon gradient

Now, if we also want the icon to have a gradient, we can just add it using the same logic as the above for the main container.

Starting off, we want to remove the text shadow from the icon as it wont play nice with gradient clipping.
.fab{text-shadow:0px 0px 0px #00000000 !important;}

Then for the gradient itself, you add this to set a background gradient that the icon clips to.
  background: linear-gradient(120deg, #04e84a 30%, #3972e5 100%)!important;
  -webkit-background-clip: text!important;
  -webkit-text-fill-color: transparent!important;

This will look something like this;

We can also simply skip this last bit of code if you rather want it to have more of a 'see-through' effect of the circle element, by just changing the icon color in the editor instead;

Result with different gradient, and solid icon color


Icon container/circle gradient

And maybe you rather change the circle element to a gradient instead of the main container?

You can also choose to use two different gradients for the icon and the circle element and/or main container, in this example we remove the prior gradients.
.fab{background: linear-gradient(120deg, #6931c8 10%, #3972e5 100%)!important;}
This leaves us with this, after changing the solids in the editor.


All together now!

Code for all together;
.fab{text-shadow:0px 0px 0px #00000000 !important;}

.nortification{background: linear-gradient(110deg, #411db3 20%, #19a8bb 90%)!important;}

  background: linear-gradient(120deg, #f32d65 10%, #651fdd 100%)!important;

  background: linear-gradient(120deg, #19a8bb 10%, #270c7c 100%)!important;
  -webkit-background-clip: text!important;
  -webkit-text-fill-color: transparent!important;
Like Comment

Hello, Robin here!

I'm a developer, designer and illustrator here at the VBI team, been working with all sorts of creative work all my life, and code for 16 years.
Been with VBI for a few years now and never been more at home!

I live in Sweden, got plenty of animals (dog, cats, chickens and even geese), currently aspiring to expand my skillset with tattooing as well on my free time!
Super into blackwork tattoos and general bodymod (piercings and such).

If you get things on the store, chances are I programmed it to make it not only look nice, but work well and let you customize them! I love providing more value through usability and would love to hear more from you all on what you'd like to see going forward!

Changing overlay colors in OBS with filters

By using filters in SLOBS/OBS you can apply a color correction and adjust the hue to get very interesting results. 
So here's a quick overview on how to access and apply a color correction filter!

Adding the filter

We'll start off with right-clicking the source and choosing "Filters".

In the new window that pops up, click the "+" button to start adding a new filter then select "Color Correction".
As you can see there's also other filters that you can experiment with here.

Filter settings

Now you can edit the color correction with various sliders to tweak the look!
What you usually want to focus on is "hue-shift" which changes the colors around differently based on what their original value is.

Changing contrast and saturation is going to be usable for packages the most, but in some cases where you want to increase the brightness and contrast, lowering the gamma can be useful to balance out it looking 'washed out'.

If you want to start over changing the filter settings, the "defaults" button will reset the filter to not have any difference from the original source.

Once you're done, simply close the window, or remove the filter if you change your mind using the "-" button.

To apply the exact same filter to other elements
right-click first source -> copy filters -> right-click new source -> paste filters

Conclusion & more usecases

Using a filter like this is especially useful for packages such as Archetype
or System Override which are both monochrome.
And can be applied to a browser/widget source as well to adjust your alerts and such as well!

Shown here just going one way for the hue of Archetype

By lowering the contrast a lot you can invert the dark and light elements to create a dark version of an otherwise light package!
From there you could adjust gamma, brightness and increase the saturation

Same image from Archetype with additional filter settings changed

Like Comment