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
}
},