I have:
return (
<Particles
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1
}}
params={{
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
polygon: {
nb_sides: 7
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"repulse": {
"distance": 200,
"duration": 0.4
}
}
},
"retina_detect": true
}} />
No matter how high I make number.value, the number of particles on the screen just doesn't increase. Any thoughts on what I'm doing wrong?
You've missed to enclose this properties inside particles. Also remove the z-index property from styles or set it to 0 that will display the particles
particles: {
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
polygon: {
nb_sides: 7
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"repulse": {
"distance": 200,
"duration": 0.4
}
}
},
"retina_detect": true