tkamath99
tkamath99

Reputation: 649

Adding TSParticles params in React Particle

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

Upvotes: 1

Views: 888

Answers (0)

Related Questions