<Particles params={{ "particles": { "number": { "value": 1600, "density": { "enable": false } }, "size": { "value": 3, "random": true, "anim": { "speed": 4, "size_min": 0.3 } }, "line_linked": { "enable": false }, "move": { "random": true, "speed": 1, "direction": "top", "out_mode": "out" } }, "interactivity": { "events": { "onhover": { "enable": true, "mode": "bubble" }, "onclick": { "enable": true, "mode": "repulse" } }, "modes": { "bubble": { "distance": 250, "duration": 2, "size": 0, "opacity": 0 }, "repulse": { "distance": 400, "duration": 4 } } } }} />npm install react-particles-jsimport Particles from "react-tsparticles"; const App = () => { const particlesInit = (main) => { console.log(main); // you can initialize the tsParticles instance (main) here, adding custom shapes or presets }; const particlesLoaded = (container) => { console.log(container); }; return ( <Particles id="tsparticles" init={particlesInit} loaded={particlesLoaded} options={{ background: { color: { value: "#0d47a1", }, }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: "push", }, onHover: { enable: true, mode: "repulse", }, resize: true, }, modes: { bubble: { distance: 400, duration: 2, opacity: 0.8, size: 40, }, push: { quantity: 4, }, repulse: { distance: 200, duration: 0.4, }, }, }, particles: { color: { value: "#ffffff", }, links: { color: "#ffffff", distance: 150, enable: true, opacity: 0.5, width: 1, }, collisions: { enable: true, }, move: { direction: "none", enable: true, outMode: "bounce", random: false, speed: 6, straight: false, }, number: { density: { enable: true, area: 800, }, value: 80, }, opacity: { value: 0.5, }, shape: { type: "circle", }, size: { random: true, value: 5, }, }, detectRetina: true, }} /> ); };yarn add react-particles-js<Particles params={{ "particles": { "number": { "value": 160, "density": { "enable": false } }, "size": { "value": 3, "random": true, "anim": { "speed": 4, "size_min": 0.3 } }, "line_linked": { "enable": false }, "move": { "random": true, "speed": 1, "direction": "top", "out_mode": "out" } }, "interactivity": { "events": { "onhover": { "enable": true, "mode": "bubble" }, "onclick": { "enable": true, "mode": "repulse" } }, "modes": { "bubble": { "distance": 250, "duration": 2, "size": 0, "opacity": 0 }, "repulse": { "distance": 400, "duration": 4 } } } }} /><Particles params={{ "fps_limit": 28, "particles": { "collisions": { "enable": false }, "number": { "value": 200, "density": { "enable": false } }, "line_linked": { "enable": true, "distance": 30, "opacity": 0.4 }, "move": { "speed": 1 }, "opacity": { "anim": { "enable": true, "opacity_min": 0.05, "speed": 1, "sync": false }, "value": 0.4 } }, "polygon": { "enable": true, "scale": 0.5, "type": "inline", "move": { "radius": 10 }, "url": "/small-deer.2a0425af.svg", "inline": { "arrangement": "equidistant" }, "draw": { "enable": true, "stroke": { "color": "rgba(255, 255, 255, .2)" } } }, "retina_detect": false, "interactivity": { "events": { "onhover": { "enable": true, "mode": "bubble" } }, "modes": { "bubble": { "size": 6, "distance": 40 } } } }} />