react-particles mouse cursor particle

Question

I'm using react-particles and I would like to create the same behavior as shown in this CodePen: https://codepen.io/franky/pen/LGMWPK. This means that on mouseover, I would like to have a single particle that is always at the same position as my cursor. The closest thing I found is the trail effect, but it creates too many particles for my needs. Do you have any ideas on how to achieve this?

This is my react code so far:

import { useCallback, useEffect, useRef } from "react";
import Particles from "react-particles";
import { loadFull, tsParticles } from "tsparticles";

export default function App() {
  const particlesInit = useCallback(async (engine) => {
    console.log(engine);
    // you can initiate the tsParticles instance (engine) here, adding custom shapes or presets
    // this loads the tsparticles package bundle, it's the easiest method for getting everything ready
    // starting from v2 you can add only the features you need reducing the bundle size
    await loadFull(engine);
  }, []);

  const particlesLoaded = useCallback(async (container) => {
    await console.log(container);
  }, []);

  return (
    <Particles
      id="tsparticles"
      init={particlesInit}
      loaded={particlesLoaded}
      options={{
        background: {
          color: {
            value: "#171717"
          }
        },
        fpsLimit: 120,
        interactivity: {
          events: {
            onClick: {
              enable: false,
              mode: "push"
            },
            onHover: {
              enable: false,
              mode: "repulse"
            },
            resize: true
          },
          modes: {
            push: {
              quantity: 4
            },
            repulse: {
              distance: 200,
              duration: 0.4
            }
          }
        },
        particles: {
          color: {
            value: "#aaa"
          },
          links: {
            color: "#929292",
            distance: 200,
            enable: true,
            opacity: 0.4,
            width: 0.7
          },
          collisions: {
            enable: true
          },
          move: {
            directions: "none",
            enable: true,
            outModes: {
              default: "out"
            },
            random: false,
            speed: 1,
            straight: false
          },
          number: {
            density: {
              enable: true,
              area: 800
            },
            value: 50
          },
          opacity: {
            value: 0.5
          },
          shape: {
            type: "circle"
          },
          size: {
            value: { min: 1.5, max: 2.5 }
          }
        },
        detectRetina: true
      }}
    />
  );
}

Update: GPT chat says that I could add single particle with zero speed so it is not moving and then update it's position when with mouse position. GPT chat claims that there is createParticle in tsparticle but I cannot find such a thing in react wrapper.

Answer 1

Have you tried to play around with the values in your code? Like here you have number: { density: { enable: true, area: 800}, **value: 50**}

Maybe the value is too big