Adding TSParticles params in React Particle

830 views Asked by At

I am trying to replicate ts particle params to use in React particles. I used the same params what are working in tsparticles, But in React it is not getting displayed. Here are the below config params for both TsParticle and React Particle.

TSParticles

particles: {
    number: { value: 10, density: { enable: true, value_area: 9999999 } },
    color: { value: "#ffffff" },
    shape: {
      type: "square",
      stroke: { width: 0, color: "#000000" },
      image: { src: "img/github.svg", width: 50, height: 50 }
    },
    opacity: {
      value: 1,
      random: true,
      anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
    },
    size: {
      value: 3,
      random: true,
      anim: { enable: false, speed: 4, size_min: 0.3, sync: false }
    },
    line_linked: {
      enable: false,
      distance: 150,
      color: "#ffffff",
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 0.5,
      direction: "bottom-right",
      random: true,
      straight: false,
      out_mode: "out",
      bounce: false,
      attract: { enable: false, rotateX: 600, rotateY: 600 }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      resize: true
    },
    modes: {
      grab: { distance: 191.80819180819182, line_linked: { opacity: 1 } },
      bubble: { distance: 250, size: 0, duration: 2, opacity: 0, speed: 3 },
      repulse: { distance: 695.3046953046953, duration: 0.4 },
      push: { particles_nb: 4 },
      remove: { particles_nb: 2 }
    }
  },

React Particles

particles: {
      number: { value: 10, density: { enable: true, value_area: 99999 } },
      color: { value: "#ffffff" },
      shape: {
        type: "square",
        stroke: { width: 0, color: "#000000" },
        image: { src: "img/github.svg", width: 50, height: 50 }
      },
      opacity: {
        value: 1,
        random: true,
        anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
      },
      size: {
        value: 3,
        random: true,
        anim: { enable: false, speed: 4, size_min: 0.3, sync: false }
      },
      move: {
        enable: true,
        speed: 0.5,
        direction: "top-left",
        random: true,
        straight: false,
        out_mode: "out",
        bounce: false,
        attract: { enable: false, rotateX: 600, rotateY: 600 }
      },
      interactivity: {
        detect_on: "canvas",
        events: {
          resize: true
        }
      },
    },

Link for both TsParticles and React Particles

TSParticle

React Particle

0

There are 0 answers