Example of gradients

[htopia]

Hi there,
First of all thank you so much for this amazing library!
I've been trying to find an example of gradients, I can't figure out how to get it to work.
I tried an example I found here: https://github.com/matteobruni/tsparticles/blob/main/demo/vanilla_new/configs/gradients.json
But I keep getting just white particles with no color at all, could it be a bug?
Here's the pen I was using to test that config: https://codepen.io/htopia/pen/abyOdpo

Thanks in advance!

[matteobruni]

Hi @htopia, you need to add two things for gradients:

It’s an external plugin and it’s imported here:

https://github.com/matteobruni/tsparticles/blob/2707b77b4739f18c95ce6b83fb4e456cc49a8385/demo/vanilla_new/index.html#L156

And loaded here:

https://github.com/matteobruni/tsparticles/blob/2707b77b4739f18c95ce6b83fb4e456cc49a8385/demo/vanilla_new/index.html#L164

Package:

https://www.npmjs.com/package/tsparticles-updater-gradient

[htopia]

Oooh I see, interesting, thanks for the quick reply!
Any idea how to load it with react-tsparticles?

[htopia]

Ah nevermind, I just figured it out.
For anyone else's reference, here's how I got it to load in react-tsparticles:

First import it like so:
import { loadGradientUpdater } from "tsparticles-updater-gradient";

Then in your React component:

const ParticlesInit = (tsParticles: Main) => {
        loadGradientUpdater(tsParticles);
    }

return (
    <Particles
         {...yourOtherProps}
         init={ParticlesInit}
     />
);

Let me know if this is the correct way @matteobruni, and thanks again!

[matteobruni]

Yes it’s the correct way