0

I am using React v18.2 and react-particles v2.10.1

I am trying to configure react-particles so that when a square that is originating from the bottom of the screen meets the cursor the particles break apart into a random number of polygons.

I have seen it work with the particles when they bump into each other, however I am having a hard time making it work with the cursor.

This is my interactivity object:

interactivity: {
              events: {
    
                onHover: {
                  enable: true,
                  mode: ['repulse'],
                },

                resize: true,
              },
              modes: {
                repulse: {
                  mode: 'split',
                  split: {
                    distance: 10,
                    count: 1,
                    factor: {
                      value: 9,
                      random: {
                        enable: true,
                        minimumValue: 4
                      }
                    },
                    rate: {
                      value: 10,
                      random: {
                        enable: true,
                        minimumValue: 5
                      }
                    },
                    particles: {
                      collisions: {
                        enable: false
                      },
                      destroy: {
                        mode: "none"
                      },
                      life: {
                        count: 1,
                        duration: {
                          value: 1
                        }
                      }
                    }
                  },
                },
              },
            },

Is this possible? I have tried to look up the possible modes for onHover and was having a hard time finding a list of possible methods so I tried to hotwire one I knew worked (repulse).

Thanks in advance!

Edit: I should mention that the current functionality of this interactivity object is that when you mouse over a particle it disappears, which is half the battle! What causes it to disappear is the this bit of code:

factor: {
                      value: 9,
                      random: {
                        enable: true,
                        minimumValue: 4
                      }
                    },
Vcoss
  • 43
  • 6

0 Answers0