0

I tried a lot with react-tsparticles plugin options but I cannot manage to have exactly the same animation as whois.domaintools.com .

When my page is launched, the particles are everywhere within the canevas but on the page I mention, the group of particles follow the mouse ( OnHover) .

Here is my plugin's configuration :

<Particles
          id="tsparticles"
          init={particlesInit}
          loaded={particlesLoaded}
          options={{
            fpsLimit: 60,
            interactivity: {
              events: {
                onHover: {
                  enable: true,
                  mode: ["connect","grab"],
                },
                onClick: {
                    enable: false,
                },
                resize: true,
              },
              modes: {
                bubble: {
                  distance: 400,
                  duration: 1,
                  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: true,
                speed: 3,
                straight: false,
              },
              number: {
                density: {
                  enable: true,
                  value_area: 800,
                },
                value: 80,
              },
              opacity: {
                value: 0.5,
              },
              shape: {
                type: "circle"
              },
              size: {
                random: true,
                value: 5,
              },
            },
            detectRetina: true,
          }}
        />

Note : The whois page that I give as example/reference may not be using the tsparticles plugin, my goal is to achieve the same rendering and not copy their config.

Mehdi
  • 1,340
  • 15
  • 23

1 Answers1

2

Be aware that whois.domaintools.com uses a canvas element that is referenced with a useRef hook and doesn't use the Particles library. Although you may be able to get close to mirroring the same effect, it's probably impossible to mirror it 100%.

They call their effect Spiders, and can be found in: https://whois.domaintools.com/images/webpack-whois-landing/static/js/Components/Spiders/Spiders.js

Edit: The Particles library does provide some hover options, but none that suit what you're aiming for. These can be found in their hover docs. I think if you're intent on using Particles, you're gonna have to compromise on its limitations compared to the domaintools custom component.

I did find a very similar version of the domaintools version: https://codepen.io/MarcoGuglielmelli/pen/lLCxy. Again it depends on whether using Particles is a must or not.

Dean James
  • 2,491
  • 4
  • 21
  • 29