Smooth react-tsparciles particles slow down

41 Views Asked by At

The behaviour of my particles is as follwos : they are being created they bounce with eachother gaining speed(infinitely).

I want the particles to bouce with eachother, but I want them to lose their speed gradually after let's say they reach a speed of 15,then after they reach a speed of 10, slow down the rate at witch they lose speed. I checked the tsparticles documentation and it dosen't seem to have a way to do this without some extra code. I tried somethings but I couldn't get it to work(this is my first time trying to extend the functionalities of a library).

 <Particles
        id="tsparticles"
        init={particlesInit}
        loaded={particlesLoaded}
        options={{
          background: {
            color: {
              value: `var(--body_background)`,
            },
          },
          fpsLimit: 120,
          interactivity: {
            events: {
              onClick: {
                enable: true,
                mode: 'push',
              },
              onHover: {
                enable: true,
                mode: 'attract',
              },
              resize: true,
            },

            modes: {
              push: {
                quantity: 5,
              },
              //the attract onHover
              attract: {
                distance: 200,
                speed: 1.3,
              },
            },
          },
          particles: {
            collisions: { enable: true },
            color: {
              value: ['#FF3131'],
            },
            links: {
              color: '#E1D9D1',
              distance: 165,
              enable: true,
              opacity: 0.6,
              width: 1.3,
            },
            move: {
              direction: 'none',
              enable: true,
              outModes: {
                default: 'bounce',
              },
              random: true, // Set random to true
              speed: { min: 0.2, max: 2.7 }, // Provide a range for speed
              wrap: true,
            },

            number: {
              density: {
                enable: true,
                area: 800,
              },
              value: 200,
              max: 250,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: 'circle',
            },
            size: {
              value: { min: 1, max: 5 },
            },
          },

          detectRetina: true,
        }}
      />
0

There are 0 best solutions below