Recently, I wanted to start a personal blog with React. When I saw that a lot of blogs on the Internet were using particle effects, I thought, I want to start one too. For React, use “React Particles – JS “: “^3.4.1”, use this pack.

The effect

My configuration

"particles": {
            "number": {
              "value": 40."density": {
                "enable": true."value_area": 800}},"color": {
              "value": "#ffffff"
            },
            "shape": {
              "type": "circle"."stroke": {
                "width": 0."color": "# 000000"
              },
              "polygon": {
                "nb_sides": 5
              },
              "image": {
                "src": "img/github.svg"."width": 100."height": 100}},"opacity": {
              "value": 0.7."random": false."anim": {
                "enable": false."speed": 1."opacity_min": 0.1."sync": false}},"size": {
              "value": 3."random": true."anim": {
                "enable": false."speed": 40."size_min": 0.1."sync": false}},"line_linked": {
              "enable": true."distance": 150."color": "#ffffff"."opacity": 0.6."width": 1
            },
            "move": {
              "enable": true."speed": 1."direction": "none"."random": false."straight": false."out_mode": "out"."bounce": false."attract": {
                "enable": false."rotateX": 3000."rotateY": 1500}}},"interactivity": {
            "detect_on": "canvas"."events": {
              "onhover": {
                "enable": true."mode": "grab"
              },
              "onclick": {
                "enable": true."mode": "push"
              },
              "resize": true
            },
            "modes": {
              "grab": {
                "distance": 200."line_linked": {
                  "opacity": 1}},"bubble": {
                "distance": 400."size": 40."duration": 2."opacity": 8,},"repulse": {
                "distance": 200."duration": 0.4
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2}}},"retina_detect": false
Copy the code

Configuration Significance

The key value Parameter Options/Description The instance
particles.number.value Number/quantity 40
particles.number.density.enable boolean    true / false
particles.number.density.value_area Number Area dispersion density 800
particles.color.value

HEX (string) 

RGB (object) 

HSL (object) 

array selection (HEX) 

random (string)

Atomic color

 "#b61924" 

{r:182, g:25, b:36} 

{h:356, s:76, l:41} 

["#b61924", "#333333", "999999"] 

"random"
particles.shape.type string 

Array Selection the shape of the atom		 "circle" 

"edge" 

"triangle" 

"polygon" 

"star" 

"image" 

["circle", "triangle", "image"]
particles.shape.stroke.width Number Specifies the width of the principle 2
particles.shape.stroke.color HEX (string) Atomic color "# 222222"
particles.shape.polygon.nb_slides Number Number of polygon edges of an atom 5
particles.shape.image.src path link 

SVG/PNG/GIF/JPG atomic images can use custom images		 "assets/img/yop.svg" 

"http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width number 

(for aspect ratio) Image width		 100
particles.shape.image.height number 

(for aspect ratio) Image height		 100
particles.opacity.value Number (0 to 1) Opacity 0.75
particles.opacity.random Boolean Random opacity true / false
particles.opacity.anim.enable Boolean gradient animation true / false
particles.opacity.anim.speed Number Gradient animation speed 3
particles.opacity.anim.opacity_min Number (0 to 1) Opacity of the gradient animation 0.25
particles.opacity.anim.sync boolean true / false
particles.size.value Number Atomic size 20
particles.size.random Boolean Random atomic size true / false
particles.size.anim.enable Boolean atomic gradient true / false
particles.size.anim.speed Number Atomic gradient speed 3
particles.size.anim.size_min number 0.25
particles.size.anim.sync boolean true / false
particles.line_linked.enable Boolean line true / false
particles.line_linked.distance Number Connection distance 150
particles.line_linked.color HEX (String) Cable color #ffffff
particles.line_linked.opacity Number (0 to 1) Connection opacity 0.5
particles.line_linked.width Number Indicates the width of the connection line 1.5
particles.move.enable Boolean atomic movement true / false
particles.move.speed Number The moving speed of atoms 4
particles.move.direction String Direction of atom movement "none" 

"top" 

"top-right" 

"right" 

"bottom-right" 

"bottom" 

"bottom-left" 

"left" 

"top-left"
particles.move.random Boolean Moves in a random direction true / false
particles.move.straight Boolean direct move true / false
particles.move.out_mode string  

(Out of Canvas) Whether to move out of canvas		 "out" 

"bounce"
particles.move.bounce boolean 

Whether the particles pulsate and move		 true / false
particles.move.attract.enable Boolean interatomic attraction true / false
particles.move.attract.rotateX Number atoms attract X horizontal distance between each other 3000
particles.move.attract.rotateY Number y vertical distance 1500
interactivity.detect_on String Atomic interaction detection "canvas", "window"
interactivity.events.onhover.enable Boolean hover true / false
interactivity.events.onhover.mode

string 

array selection

Hovering mode

 "grab"Grab adjacent

"bubble"Foam ball effect

"repulse"Repel effect

["grab", "bubble"]
interactivity.events.onclick.enable Boolean Click effect true / false
interactivity.events.onclick.mode

string 

array selection

Click Effect Mode

 "push" 

"remove" 

"bubble" 

"repulse" 

["push", "repulse"]
interactivity.events.resize Boolean Interactive event adjustment true / false
interactivity.events.modes.grab.distance Number Atomic interaction grab distance 100
interactivity.events.modes.grab.line_linked.opacity Number (0 to 1) Atomic interaction grab distance wire opacity 0.75
interactivity.events.modes.bubble.distance Number The distance between the atomic grab foam effects 100
interactivity.events.modes.bubble.size Number Size between atomic grab foam effects 40
interactivity.events.modes.bubble.duration Number atomic grab lasting events between foam effects

(second)		 0.4
interactivity.events.modes.repulse.distance Number Repel effect distance 200
interactivity.events.modes.repulse.duration The number knockback effect lasts the event

(second)		 1.2
interactivity.events.modes.push.particles_nb Number The number of particles that come out 4
interactivity.events.modes.push.particles_nb number 4
retina_detect boolean true / false