[polygon mask] random particles showing up on the edge

[tzurae]

Hi, From the image below, you can see that there is a random particle showing and twinkling on the edge. Sometimes you will see particles move very quickly around the edge. I have spent so much time on it but still not work.

This is my config

<Particles
      style={{
        position: 'absolute',
        bottom: 0,
        top: 0,
        left: 0,
        right: 0,
        width: '1264px',
      }}
      params={{
        detectRetina: false,
        fpsLimit: 60,
        interactivity: {
          detectsOn: InteractivityDetect.canvas,
          events: {
            onClick: {
              enable: false,
              mode: 'push',
            },
            onDiv: {
              elementId: 'repulse-div',
              enable: false,
              mode: 'repulse',
            },
            onHover: {
              enable: true,
              mode: 'bubble',
              parallax: {
                enable: false,
                force: 2,
                smooth: 10,
              },
            },
            resize: true,
          },
          modes: {
            bubble: {
              distance: 40,
              duration: 2,
              opacity: 8,
              size: 6,
              // @ts-ignore
              speed: 3,
            },
            connect: {
              distance: 80,
              lineLinked: {
                opacity: 0.5,
              },
              radius: 60,
            },
            grab: {
              distance: 400,
              lineLinked: {
                opacity: 1,
              },
            },
            push: {
              quantity: 4,
            },
            remove: {
              quantity: 2,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
            slow: {
              active: false,
              radius: 0,
              factor: 1,
            },
          },
        },
        particles: {
          color: {
            value: 'rgba(0,188,178,0.5)',
          },
          lineLinked: {
            blink: false,
            color: 'rgba(0,188,178,0.5)',
            consent: false,
            distance: 30,
            enable: true,
            opacity: 0.4,
            width: 1,
          },
          move: {
            enable: true,
            bounce: false,
            direction: MoveDirection.top,
            outMode: OutMode.bounce,
            random: false,
            speed: 0.3,
            straight: false,
          },
          number: {
            density: {
              enable: false,
              area: 1000,
            },
            limit: 0,
            value: 80,
          },
          opacity: {
            animation: {
              enable: true,
              minimumValue: 0.05,
              speed: 2,
              sync: false,
            },
            random: false,
            value: 0.4,
          },
          size: {
            animation: {
              enable: false,
              minimumValue: 0.1,
              speed: 40,
              sync: false,
            },
            random: false,
            value: 3,
          },
        },
        polygon: {
          draw: {
            enable: true,
            lineColor: 'rgba(0,188,178,0.5)',
            lineWidth: 0.5,
            ...debugMode(false),
          },
          move: {
            radius: 10,
          },
          inline: {
            // @ts-ignore
            arrangement: 'equidistant',
          },
          scale, // props
          // @ts-ignore
          type: 'inline',
          url, // props
        },
      }}
    />

[matteobruni]

Hi @joey3060

Which version are you using? Can you make a codesandbox with the issue so I can have a look?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.