Trail mode of hovering events doesnt work in tsParticles(similar to particlejs)

Question

I have got two queries, I am implementing tsParticles in my React application. First one:.

<Particles 
        id="tsparticles"
        options={{
          background: {
            color: {
              value: "black",
            },
          },
          fpsLimit: 60,
          interactivity: {
            detectsOn: "window",
            events: {
              onClick: {
                enable: true,
                mode: "push",
              },
              onHover: {
                
                enable: true,
                mode: "trail",
              },
              resize: true,
            },
            modes: {
              bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
              },
              push: {
                quantity: 4,
              },
              repulse: {
                distance: 200,
                duration: 0.4,
              },
            },
          },
          particles: {
              
            color:{
                animation:{
                    enable:true,
                    speed:50,
                },
                value:"#f00"
            },
            links: {
                shadow:{
                    blur:true,
                    color:"#00ff00"

                },
                triangles:{
                    frequency: 1
                },
              color: "random",
              distance: 150,
              enable: true,
              frequency:1,
              opacity: 0.5,
              width: 1,
            },
            collisions: {
              enable: true,
            },
            move: {
                angle:{
                    offset: 45,
                    value: 90
                },
                attract:{
                    rotate:{
                        x:3000,
                        y:3000
                    }
                },
                gravity:{
                    acceleration: 9.81,
                    enable:false,
                    maxSpeed:1
                },
              direction: "none",
              enable: true,
              outMode: "bounce",
              random: false,
              speed: 6,
              straight: false,
            },
            number: {
              density: {
                enable: true,
                value_area: 1000,
              },
              value: 80,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: "circle",
            },
            size: {
              random: true,
              value: 5,
            },
          },
          detectRetina: true,
        }}
      /> 

There is a section of onHover and key value of mode in it. There are like 8 different modes to it, can be viewed in https://particles.matteobruni.it/ . All other modes work fine but the trail mode when I use this code, am I missing some other properties to the Particles component?

Second one: Also, I have got two divs, one for the particle and the other for the text to display on top of it. I have achieved this using z-index and positions.

I need the canvas height to be dynamic that is occupy 100% height of its parent whatever the screen size is. I have tried doing this by including Particles component inside a div and keeping its height to 100% but the canvas height decreases with the decrease in the screen size.

Kindly help me, thank you :)

Answer 1

Wow, there's a lot to answer here, but I try to do my best.

First point, the config and mouse trail

The mouse trail needs more configuration, in the modes section of interactivity you have to configure the trail section.

You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY

If you need more documentation checkout the right section in documentation: https://particles.js.org/interfaces/_options_interfaces_interactivity_modes_itrail_.itrail.html

Second point, the canvas size

If you need a dynamic canvas size the best solution is to use the backgroundMode in the options root object

You can see a sample here: https://codepen.io/matteobruni/pen/MWeqxNL

The background mode if enabled sets the canvas style with a fixed position and the desired zIndex

You can see the documentation here: https://particles.js.org/interfaces/_options_interfaces_backgroundmode_ibackgroundmode_.ibackgroundmode.html

If you are using the backgroundMode, the better results are obtained without setting any style to the containing div (the tsParticles target/container)