TsParticles Collection

Multipul Images

options={{
            "autoPlay": true,
            "background": {
              "color": {
                "value": "trasparent"
              },
              "image": "",
              "position": "50% 50%",
              "repeat": "no-repeat",
              "size": "cover",
              "opacity": 1
            },
            "backgroundMask": {
              "composite": "destination-out",
              "cover": {
                "color": {
                  "value": "#fff"
                },
                "opacity": 1
              },
              "enable": false
            },
            "defaultThemes": {},
            "delay": 0,
            "fullScreen": {
              "enable": true,
              "zIndex": 1
            },
            "detectRetina": true,
            "duration": 0,
            "fpsLimit": 120,
            "interactivity": {
              "detectsOn": "window",
              "events": {
                "onClick": {
                  "enable": true,
                  "mode": "push"
                },
                "onDiv": {
                  "selectors": "#repulse-div",
                  "enable": false,
                  "mode": "repulse",
                  "type": "circle"
                },
                "onHover": {
                  "enable": true,
                  "mode": "bubble",
                  "parallax": {
                    "enable": false,
                    "force": 60,
                    "smooth": 10
                  }
                },
                "resize": {
                  "delay": 0.5,
                  "enable": true
                }
              },
              "modes": {
                "attract": {
                  "distance": 200,
                  "duration": 0.4,
                  "easing": "ease-out-quad",
                  "factor": 1,
                  "maxSpeed": 50,
                  "speed": 1
                },
                "bounce": {
                  "distance": 200
                },
                "bubble": {
                  "distance": 400,
                  "duration": 2,
                  "mix": false,
                  "opacity": 0.8,
                  "size": 40,
                  "divs": {
                    "distance": 200,
                    "duration": 0.4,
                    "mix": false,
                    "selectors": []
                  }
                },
                "connect": {
                  "distance": 80,
                  "links": {
                    "opacity": 0.5
                  },
                  "radius": 60
                },
                "grab": {
                  "distance": 400,
                  "links": {
                    "blink": false,
                    "consent": false,
                    "opacity": 1
                  }
                },
                "push": {
                  "default": true,
                  "groups": [],
                  "quantity": 4
                },
                "remove": {
                  "quantity": 2
                },
                "repulse": {
                  "distance": 200,
                  "duration": 0.4,
                  "factor": 100,
                  "speed": 1,
                  "maxSpeed": 50,
                  "easing": "ease-out-quad",
                  "divs": {
                    "distance": 200,
                    "duration": 0.4,
                    "factor": 100,
                    "speed": 1,
                    "maxSpeed": 50,
                    "easing": "ease-out-quad",
                    "selectors": []
                  }
                },
                "slow": {
                  "factor": 3,
                  "radius": 200
                },
                "trail": {
                  "delay": 1,
                  "pauseOnStop": false,
                  "quantity": 1
                },
                "light": {
                  "area": {
                    "gradient": {
                      "start": {
                        "value": "#ffffff"
                      },
                      "stop": {
                        "value": "#000000"
                      }
                    },
                    "radius": 1000
                  },
                  "shadow": {
                    "color": {
                      "value": "#000000"
                    },
                    "length": 2000
                  }
                }
              }
            },
            "manualParticles": [],
            "particles": {
              "bounce": {
                "horizontal": {
                  "random": {
                    "enable": false,
                    "minimumValue": 0.1
                  },
                  "value": 1
                },
                "vertical": {
                  "random": {
                    "enable": false,
                    "minimumValue": 0.1
                  },
                  "value": 1
                }
              },
              "collisions": {
                "absorb": {
                  "speed": 2
                },
                "bounce": {
                  "horizontal": {
                    "random": {
                      "enable": false,
                      "minimumValue": 0.1
                    },
                    "value": 1
                  },
                  "vertical": {
                    "random": {
                      "enable": false,
                      "minimumValue": 0.1
                    },
                    "value": 1
                  }
                },
                "enable": false,
                "mode": "bounce",
                "overlap": {
                  "enable": true,
                  "retries": 0
                }
              },
              "color": {
                "value": "#ffffff",
                "animation": {
                  "h": {
                    "count": 0,
                    "enable": false,
                    "offset": 0,
                    "speed": 1,
                    "decay": 0,
                    "sync": true
                  },
                  "s": {
                    "count": 0,
                    "enable": false,
                    "offset": 0,
                    "speed": 1,
                    "decay": 0,
                    "sync": true
                  },
                  "l": {
                    "count": 0,
                    "enable": false,
                    "offset": 0,
                    "speed": 1,
                    "decay": 0,
                    "sync": true
                  }
                }
              },
              "groups": {},
              "move": {
                "angle": {
                  "offset": 0,
                  "value": 90
                },
                "attract": {
                  "distance": 200,
                  "enable": false,
                  "rotate": {
                    "x": 600,
                    "y": 1200
                  }
                },
                "center": {
                  "x": 50,
                  "y": 50,
                  "mode": "percent",
                  "radius": 0
                },
                "decay": 0,
                "distance": {},
                "direction": "none",
                "drift": 0,
                "enable": true,
                "gravity": {
                  "acceleration": 9.81,
                  "enable": false,
                  "inverse": false,
                  "maxSpeed": 50
                },
                "path": {
                  "clamp": true,
                  "delay": {
                    "random": {
                      "enable": false,
                      "minimumValue": 0
                    },
                    "value": 0
                  },
                  "enable": false,
                  "options": {}
                },
                "outModes": {
                  "default": "out",
                  "bottom": "out",
                  "left": "out",
                  "right": "out",
                  "top": "out"
                },
                "random": false,
                "size": false,
                "speed": 2,
                "spin": {
                  "acceleration": 0,
                  "enable": false
                },
                "straight": false,
                "trail": {
                  "enable": false,
                  "length": 10,
                  "fillColor": {
                    "value": "#000000"
                  }
                },
                "vibrate": false,
                "warp": false
              },
              "number": {
                "density": {
                  "enable": true,
                  "area": 800,
                  "factor": 1000
                },
                "limit": 0,
                "value": 80
              },
              "opacity": {
                "random": {
                  "enable": true,
                  "minimumValue": 0.1
                },
                "value": {
                  "min": 0.1,
                  "max": 1
                },
                "animation": {
                  "count": 0,
                  "enable": true,
                  "speed": 1,
                  "decay": 0,
                  "sync": false,
                  "destroy": "none",
                  "startValue": "random",
                  "minimumValue": 0.2
                }
              },
              "reduceDuplicates": false,
              "shadow": {
                "blur": 0,
                "color": {
                  "value": "#000"
                },
                "enable": false,
                "offset": {
                  "x": 0,
                  "y": 0
                }
              },
              "shape": {
                "options": {
                  "character": {
                    "fill": false,
                    "font": "Verdana",
                    "style": "",
                    "value": "*",
                    "weight": "400"
                  },
                  "char": {
                    "fill": false,
                    "font": "Verdana",
                    "style": "",
                    "value": "*",
                    "weight": "400"
                  },
                  "polygon": {
                    "sides": 5
                  },
                  "star": {
                    "sides": 5
                  },
                  "image": [
                    {
                      "src": "https://img.icons8.com/color/144/000000/html-5--v1.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/000000/css3.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/000000/javascript--v1.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/typescript.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/000000/bootstrap.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/000000/material-ui.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/mongodb.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/git.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/fluency/144/undefined/visual-studio.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/firebase.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/external-tal-revivo-color-tal-revivo/96/undefined/external-netlify-a-cloud-computing-company-that-offers-hosting-and-serverless-backend-services-for-static-websites-logo-color-tal-revivo.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/heroku.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/npm.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/figma--v1.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://i.ibb.co/thzzhZ1/React-Native.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://i.ibb.co/DRCBB60/express.png",
                      "width": 32,
                      "height": 32
                    }
                  ],
                  "images": [
                    {
                      "src": "https://img.icons8.com/color/144/000000/html-5--v1.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/000000/css3.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/000000/javascript--v1.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/typescript.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/000000/bootstrap.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/000000/material-ui.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/mongodb.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/git.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/fluency/144/undefined/visual-studio.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/firebase.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/external-tal-revivo-color-tal-revivo/96/undefined/external-netlify-a-cloud-computing-company-that-offers-hosting-and-serverless-backend-services-for-static-websites-logo-color-tal-revivo.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/heroku.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/npm.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://img.icons8.com/color/144/undefined/figma--v1.png",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://i.ibb.co/fGcpNgr/react.webp",
                      "width": 32,
                      "height": 32
                    },
                    {
                      "src": "https://i.ibb.co/MZMWqd8/github.png",
                      "width": 32,
                      "height": 32
                    }
                  ]
                },
                "type": "image"
              },
              "size": {
                "random": {
                  "enable": false,
                  "minimumValue": 1
                },
                "value": 16,
                "animation": {
                  "count": 0,
                  "enable": false,
                  "speed": 40,
                  "decay": 0,
                  "sync": false,
                  "destroy": "none",
                  "startValue": "random",
                  "minimumValue": 0.1
                }
              },
              "stroke": {
                "width": 0,
                "color": {
                  "value": "#000000",
                  "animation": {
                    "h": {
                      "count": 0,
                      "enable": false,
                      "offset": 0,
                      "speed": 1,
                      "decay": 0,
                      "sync": true
                    },
                    "s": {
                      "count": 0,
                      "enable": false,
                      "offset": 0,
                      "speed": 1,
                      "decay": 0,
                      "sync": true
                    },
                    "l": {
                      "count": 0,
                      "enable": false,
                      "offset": 0,
                      "speed": 1,
                      "decay": 0,
                      "sync": true
                    }
                  }
                }
              },
              "zIndex": {
                "random": {
                  "enable": false,
                  "minimumValue": 0
                },
                "value": 0,
                "opacityRate": 1,
                "sizeRate": 1,
                "velocityRate": 1
              },
              "life": {
                "count": 0,
                "delay": {
                  "random": {
                    "enable": false,
                    "minimumValue": 0
                  },
                  "value": 0,
                  "sync": false
                },
                "duration": {
                  "random": {
                    "enable": false,
                    "minimumValue": 0.0001
                  },
                  "value": 0,
                  "sync": false
                }
              },
              "rotate": {
                "random": {
                  "enable": true,
                  "minimumValue": 0
                },
                "value": 0,
                "animation": {
                  "enable": true,
                  "speed": 5,
                  "decay": 0,
                  "sync": false
                },
                "direction": "random",
                "path": false
              },
              "destroy": {
                "bounds": {},
                "mode": "none",
                "split": {
                  "count": 1,
                  "factor": {
                    "random": {
                      "enable": false,
                      "minimumValue": 0
                    },
                    "value": 3
                  },
                  "rate": {
                    "random": {
                      "enable": false,
                      "minimumValue": 0
                    },
                    "value": {
                      "min": 4,
                      "max": 9
                    }
                  },
                  "sizeOffset": true,
                  "particles": {}
                }
              },
              "roll": {
                "darken": {
                  "enable": false,
                  "value": 0
                },
                "enable": false,
                "enlighten": {
                  "enable": false,
                  "value": 0
                },
                "mode": "vertical",
                "speed": 25
              },
              "tilt": {
                "random": {
                  "enable": false,
                  "minimumValue": 0
                },
                "value": 0,
                "animation": {
                  "enable": false,
                  "speed": 0,
                  "decay": 0,
                  "sync": false
                },
                "direction": "clockwise",
                "enable": false
              },
              "twinkle": {
                "lines": {
                  "enable": false,
                  "frequency": 0.05,
                  "opacity": 1
                },
                "particles": {
                  "enable": false,
                  "frequency": 0.05,
                  "opacity": 1
                }
              },
              "wobble": {
                "distance": 5,
                "enable": false,
                "speed": {
                  "angle": 50,
                  "move": 10
                }
              },
              "orbit": {
                "animation": {
                  "count": 0,
                  "enable": false,
                  "speed": 1,
                  "decay": 0,
                  "sync": false
                },
                "enable": false,
                "opacity": 1,
                "rotation": {
                  "random": {
                    "enable": false,
                    "minimumValue": 0
                  },
                  "value": 45
                },
                "width": 1
              },
              "links": {
                "blink": false,
                "color": {
                  "value": "#000"
                },
                "consent": false,
                "distance": 150,
                "enable": false,
                "frequency": 1,
                "opacity": 0.4,
                "shadow": {
                  "blur": 5,
                  "color": {
                    "value": "#000"
                  },
                  "enable": false
                },
                "triangles": {
                  "enable": false,
                  "frequency": 1
                },
                "width": 1,
                "warp": false
              },
              "repulse": {
                "random": {
                  "enable": false,
                  "minimumValue": 0
                },
                "value": 0,
                "enabled": false,
                "distance": 1,
                "duration": 1,
                "factor": 1,
                "speed": 1
              }
            },
            "pauseOnBlur": true,
            "pauseOnOutsideViewport": true,
            "responsive": [],
            "smooth": false,
            "style": {},
            "themes": [],
            "zLayers": 100
          }}