vanta | Animated 3D backgrounds for your website | Animation library

I want to be able to detect whether it was dark mode or the window being resized ran the useEffect function.

You can have two effects in your component one for mode and the other for windowSize.

Additionally, whenever I try to lint the function, it asks me to add vantaEffect to dependencies. When I do, the effect renders too many times and lags the page.

You can use functional state update to access the previous state:

Try this:

I recently got it working myself - it takes a combination of loading the libraries from a CDN and making sure you use the window object. This is what I'm using with Squarespace 7.1 which is working as of the time posting this. I put the code into the page I wanted under Page settings > Advanced > Page Header Code Injection :

So, I fiddled a bit with the sandbox that Lawrence provided, and I was able to make it work like this: https://codesandbox.io/s/winter-thunder-pffsq

Basically what happens is that Vanta assumes that THREE is set on window, which doesn't happen when we import it from npm. So you must import Vanta after you import THREE and set it as a window variable.