Rezmason / matrix

matrix (web-based green code rain, made with love)
https://rezmason.github.io/matrix
MIT License
3.29k stars 212 forks source link

Feature Request: render the effect to a transparent canvas #46

Open RipleyBooya opened 1 year ago

RipleyBooya commented 1 year ago

Hello,

first of all: awesome <3

I'm using your project as sources into my OBS (streaming software) (i'll add you into my credits ofc)

I would like to know if there is a possibility to have a transparent background instead of black/colored ? so i can put it in front of existing material in my OBS without hiding everything :)

sorry if it's already feasible i tried with the RGB codes but my knowledge is very limited :(

NB: I'm aware that's not an important/urgent request.

Have a nice day :)

FieryRMS commented 1 year ago

heyy, you're in luck! Go check out my pr #44, you can use that until it gets merged with the main repo!

OleMussmann commented 3 months ago

This won't work for OBS, but if you want the overlay in the browser itself, you can use CSS: mix-blend-mode=screen, like:

    <iframe
      src="https://rezmason.github.io/matrix/"
      style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .2;
        mix-blend-mode: screen;
        z-index: 2;
      ">

Make sure your other element's z-index are correct. Background below, other content above.