@tsparticles/pjs 3.0.0-beta.4 → 3.0.0-beta.5

package/tsparticles.pjs.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-beta.4
+ * v3.0.0-beta.5
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -183,11 +183,248 @@ class Particles {
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/VincentGarreau/particles.js
+
+const defaultPjsOptions = {
+  particles: {
+    number: {
+      value: 400,
+      density: {
+        enable: true,
+        value_area: 800
+      }
+    },
+    color: {
+      value: "#fff"
+    },
+    shape: {
+      type: "circle",
+      stroke: {
+        width: 0,
+        color: "#ff0000"
+      },
+      polygon: {
+        nb_sides: 5
+      },
+      image: {
+        src: "",
+        width: 100,
+        height: 100
+      }
+    },
+    opacity: {
+      value: 1,
+      random: false,
+      anim: {
+        enable: false,
+        speed: 2,
+        opacity_min: 0,
+        sync: false
+      }
+    },
+    size: {
+      value: 20,
+      random: false,
+      anim: {
+        enable: false,
+        speed: 20,
+        size_min: 0,
+        sync: false
+      }
+    },
+    line_linked: {
+      enable: true,
+      distance: 100,
+      color: "#fff",
+      opacity: 1,
+      width: 1
+    },
+    move: {
+      enable: true,
+      speed: 2,
+      direction: "none",
+      random: false,
+      straight: false,
+      out_mode: "out",
+      bounce: false,
+      attract: {
+        enable: false,
+        rotateX: 3000,
+        rotateY: 3000
+      }
+    }
+  },
+  interactivity: {
+    detect_on: "canvas",
+    events: {
+      onhover: {
+        enable: true,
+        mode: "grab"
+      },
+      onclick: {
+        enable: true,
+        mode: "push"
+      },
+      resize: true
+    },
+    modes: {
+      grab: {
+        distance: 100,
+        line_linked: {
+          opacity: 1
+        }
+      },
+      bubble: {
+        distance: 200,
+        size: 80,
+        duration: 0.4,
+        opacity: 1,
+        speed: 3
+      },
+      repulse: {
+        distance: 200,
+        duration: 0.4
+      },
+      push: {
+        particles_nb: 4
+      },
+      remove: {
+        particles_nb: 2
+      }
+    }
+  },
+  retina_detect: false
+};
 const initParticlesJS = engine => {
   const particlesJS = (tagId, options) => {
+    const fixedOptions = (0,engine_root_window_.deepExtend)(defaultPjsOptions, options);
     return engine.load({
       id: tagId,
-      options
+      options: {
+        fullScreen: {
+          enable: false
+        },
+        detectRetina: fixedOptions.retina_detect,
+        smooth: true,
+        interactivity: {
+          detectsOn: fixedOptions.interactivity.detect_on,
+          events: {
+            onHover: {
+              enable: fixedOptions.interactivity.events.onhover.enable,
+              mode: fixedOptions.interactivity.events.onhover.mode
+            },
+            onClick: {
+              enable: fixedOptions.interactivity.events.onclick.enable,
+              mode: fixedOptions.interactivity.events.onclick.mode
+            },
+            resize: {
+              enable: fixedOptions.interactivity.events.resize
+            }
+          },
+          modes: {
+            grab: {
+              distance: fixedOptions.interactivity.modes.grab.distance,
+              links: {
+                opacity: fixedOptions.interactivity.modes.grab.line_linked.opacity
+              }
+            },
+            bubble: {
+              distance: fixedOptions.interactivity.modes.bubble.distance,
+              size: fixedOptions.interactivity.modes.bubble.size,
+              duration: fixedOptions.interactivity.modes.bubble.duration,
+              opacity: fixedOptions.interactivity.modes.bubble.opacity,
+              speed: fixedOptions.interactivity.modes.bubble.speed
+            },
+            repulse: {
+              distance: fixedOptions.interactivity.modes.repulse.distance,
+              duration: fixedOptions.interactivity.modes.repulse.duration
+            },
+            push: {
+              quantity: fixedOptions.interactivity.modes.push.particles_nb
+            },
+            remove: {
+              quantity: fixedOptions.interactivity.modes.remove.particles_nb
+            }
+          }
+        },
+        particles: {
+          collisions: {
+            enable: fixedOptions.particles.move.bounce
+          },
+          number: {
+            value: fixedOptions.particles.number.value,
+            density: {
+              enable: fixedOptions.particles.number.density.enable,
+              width: fixedOptions.particles.number.density.value_area
+            }
+          },
+          color: {
+            value: fixedOptions.particles.color.value
+          },
+          stroke: {
+            width: fixedOptions.particles.shape.stroke.width,
+            color: {
+              value: fixedOptions.particles.shape.stroke.color
+            }
+          },
+          shape: {
+            type: fixedOptions.particles.shape.type,
+            options: {
+              polygon: {
+                sides: fixedOptions.particles.shape.polygon.nb_sides
+              },
+              image: {
+                src: fixedOptions.particles.shape.image.src,
+                width: fixedOptions.particles.shape.image.width,
+                height: fixedOptions.particles.shape.image.height
+              }
+            }
+          },
+          opacity: {
+            value: fixedOptions.particles.opacity.random ? {
+              min: fixedOptions.particles.opacity.anim.enable ? fixedOptions.particles.opacity.anim.opacity_min : 0,
+              max: fixedOptions.particles.opacity.value
+            } : fixedOptions.particles.opacity.value,
+            animation: {
+              enable: fixedOptions.particles.opacity.anim.enable,
+              speed: fixedOptions.particles.opacity.anim.speed,
+              sync: fixedOptions.particles.opacity.anim.sync
+            }
+          },
+          size: {
+            value: fixedOptions.particles.size.random ? {
+              min: fixedOptions.particles.size.anim.enable ? fixedOptions.particles.size.anim.size_min : 0,
+              max: fixedOptions.particles.size.value
+            } : fixedOptions.particles.size.value,
+            animation: {
+              enable: fixedOptions.particles.size.anim.enable,
+              speed: fixedOptions.particles.size.anim.speed,
+              sync: fixedOptions.particles.size.anim.sync
+            }
+          },
+          links: {
+            enable: fixedOptions.particles.line_linked.enable,
+            distance: fixedOptions.particles.line_linked.distance,
+            color: fixedOptions.particles.line_linked.color,
+            opacity: fixedOptions.particles.line_linked.opacity,
+            width: fixedOptions.particles.line_linked.width
+          },
+          move: {
+            enable: fixedOptions.particles.move.enable,
+            speed: fixedOptions.particles.move.speed / 3,
+            direction: fixedOptions.particles.move.direction,
+            random: fixedOptions.particles.move.random,
+            straight: fixedOptions.particles.move.straight,
+            outModes: fixedOptions.particles.move.out_mode,
+            attract: {
+              enable: fixedOptions.particles.move.attract.enable,
+              rotate: {
+                x: fixedOptions.particles.move.attract.rotateX,
+                y: fixedOptions.particles.move.attract.rotateY
+              }
+            }
+          }
+        }
+      }
     });
   };
   particlesJS.load = (tagId, pathConfigJson, callback) => {

package/tsparticles.pjs.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.pjs.min.js.LICENSE.txt */
-!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],o);else{var t="object"==typeof exports?o(require("@tsparticles/engine")):o(e.window);for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(this,(e=>(()=>{"use strict";var o={533:o=>{o.exports=e}},t={};function r(e){var n=t[e];if(void 0!==n)return n.exports;var i=t[e]={exports:{}};return o[e](i,i.exports,r),i.exports}r.d=(e,o)=>{for(var t in o)r.o(o,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},r.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{r.r(n),r.d(n,{initPjs:()=>t});var e=r(533);class o{static init(t){const r=new o,n=t.selector;if(!n)throw new Error("No selector provided");const i=document.querySelector(n);if(!i)throw new Error("No element found for selector");return e.tsParticles.load({id:n.replace(".","").replace("!",""),element:i,options:{fullScreen:{enable:!1},particles:{color:{value:t.color??"!000000"},links:{color:"random",distance:t.minDistance??120,enable:t.connectParticles??!1},move:{enable:!0,speed:t.speed??.5},number:{value:t.maxParticles??100},size:{value:{min:1,max:t.sizeVariations??3}}},responsive:t.responsive?.map((e=>({maxWidth:e.breakpoint,options:{particles:{color:{value:e.options?.color},links:{distance:e.options?.minDistance,enable:e.options?.connectParticles},number:{value:t.maxParticles},move:{enable:!0,speed:e.options?.speed},size:{value:e.options?.sizeVariations}}}})))}}).then((e=>{r._container=e})),r}destroy(){const e=this._container;e&&e.destroy()}pauseAnimation(){const e=this._container;e&&e.pause()}resumeAnimation(){const e=this._container;e&&e.play()}}const t=e=>{const{particlesJS:t,pJSDom:r}=(e=>{const o=(o,t)=>e.load({id:o,options:t});return o.load=(o,t,r)=>{e.load({id:o,url:t}).then((e=>{e&&r(e)})).catch((()=>{r(void 0)}))},o.setOnClickHandler=o=>{e.setOnClickHandler(o)},{particlesJS:o,pJSDom:e.dom()}})(e);return window.particlesJS=t,window.pJSDom=r,window.Particles=o,{particlesJS:t,pJSDom:r,Particles:o}}})(),n})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var i="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var a in i)("object"==typeof exports?exports:e)[a]=i[a]}}(this,(e=>(()=>{"use strict";var t={533:t=>{t.exports=e}},i={};function a(e){var n=i[e];if(void 0!==n)return n.exports;var o=i[e]={exports:{}};return t[e](o,o.exports,a),o.exports}a.d=(e,t)=>{for(var i in t)a.o(t,i)&&!a.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{a.r(n),a.d(n,{initPjs:()=>o});var e=a(533);class t{static init(i){const a=new t,n=i.selector;if(!n)throw new Error("No selector provided");const o=document.querySelector(n);if(!o)throw new Error("No element found for selector");return e.tsParticles.load({id:n.replace(".","").replace("!",""),element:o,options:{fullScreen:{enable:!1},particles:{color:{value:i.color??"!000000"},links:{color:"random",distance:i.minDistance??120,enable:i.connectParticles??!1},move:{enable:!0,speed:i.speed??.5},number:{value:i.maxParticles??100},size:{value:{min:1,max:i.sizeVariations??3}}},responsive:i.responsive?.map((e=>({maxWidth:e.breakpoint,options:{particles:{color:{value:e.options?.color},links:{distance:e.options?.minDistance,enable:e.options?.connectParticles},number:{value:i.maxParticles},move:{enable:!0,speed:e.options?.speed},size:{value:e.options?.sizeVariations}}}})))}}).then((e=>{a._container=e})),a}destroy(){const e=this._container;e&&e.destroy()}pauseAnimation(){const e=this._container;e&&e.pause()}resumeAnimation(){const e=this._container;e&&e.play()}}const i={particles:{number:{value:400,density:{enable:!0,value_area:800}},color:{value:"#fff"},shape:{type:"circle",stroke:{width:0,color:"#ff0000"},polygon:{nb_sides:5},image:{src:"",width:100,height:100}},opacity:{value:1,random:!1,anim:{enable:!1,speed:2,opacity_min:0,sync:!1}},size:{value:20,random:!1,anim:{enable:!1,speed:20,size_min:0,sync:!1}},line_linked:{enable:!0,distance:100,color:"#fff",opacity:1,width:1},move:{enable:!0,speed:2,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:3e3,rotateY:3e3}}},interactivity:{detect_on:"canvas",events:{onhover:{enable:!0,mode:"grab"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:100,line_linked:{opacity:1}},bubble:{distance:200,size:80,duration:.4,opacity:1,speed:3},repulse:{distance:200,duration:.4},push:{particles_nb:4},remove:{particles_nb:2}}},retina_detect:!1},o=a=>{const{particlesJS:n,pJSDom:o}=(t=>{const a=(a,n)=>{const o=(0,e.deepExtend)(i,n);return t.load({id:a,options:{fullScreen:{enable:!1},detectRetina:o.retina_detect,smooth:!0,interactivity:{detectsOn:o.interactivity.detect_on,events:{onHover:{enable:o.interactivity.events.onhover.enable,mode:o.interactivity.events.onhover.mode},onClick:{enable:o.interactivity.events.onclick.enable,mode:o.interactivity.events.onclick.mode},resize:{enable:o.interactivity.events.resize}},modes:{grab:{distance:o.interactivity.modes.grab.distance,links:{opacity:o.interactivity.modes.grab.line_linked.opacity}},bubble:{distance:o.interactivity.modes.bubble.distance,size:o.interactivity.modes.bubble.size,duration:o.interactivity.modes.bubble.duration,opacity:o.interactivity.modes.bubble.opacity,speed:o.interactivity.modes.bubble.speed},repulse:{distance:o.interactivity.modes.repulse.distance,duration:o.interactivity.modes.repulse.duration},push:{quantity:o.interactivity.modes.push.particles_nb},remove:{quantity:o.interactivity.modes.remove.particles_nb}}},particles:{collisions:{enable:o.particles.move.bounce},number:{value:o.particles.number.value,density:{enable:o.particles.number.density.enable,width:o.particles.number.density.value_area}},color:{value:o.particles.color.value},stroke:{width:o.particles.shape.stroke.width,color:{value:o.particles.shape.stroke.color}},shape:{type:o.particles.shape.type,options:{polygon:{sides:o.particles.shape.polygon.nb_sides},image:{src:o.particles.shape.image.src,width:o.particles.shape.image.width,height:o.particles.shape.image.height}}},opacity:{value:o.particles.opacity.random?{min:o.particles.opacity.anim.enable?o.particles.opacity.anim.opacity_min:0,max:o.particles.opacity.value}:o.particles.opacity.value,animation:{enable:o.particles.opacity.anim.enable,speed:o.particles.opacity.anim.speed,sync:o.particles.opacity.anim.sync}},size:{value:o.particles.size.random?{min:o.particles.size.anim.enable?o.particles.size.anim.size_min:0,max:o.particles.size.value}:o.particles.size.value,animation:{enable:o.particles.size.anim.enable,speed:o.particles.size.anim.speed,sync:o.particles.size.anim.sync}},links:{enable:o.particles.line_linked.enable,distance:o.particles.line_linked.distance,color:o.particles.line_linked.color,opacity:o.particles.line_linked.opacity,width:o.particles.line_linked.width},move:{enable:o.particles.move.enable,speed:o.particles.move.speed/3,direction:o.particles.move.direction,random:o.particles.move.random,straight:o.particles.move.straight,outModes:o.particles.move.out_mode,attract:{enable:o.particles.move.attract.enable,rotate:{x:o.particles.move.attract.rotateX,y:o.particles.move.attract.rotateY}}}}}})};return a.load=(e,i,a)=>{t.load({id:e,url:i}).then((e=>{e&&a(e)})).catch((()=>{a(void 0)}))},a.setOnClickHandler=e=>{t.setOnClickHandler(e)},{particlesJS:a,pJSDom:t.dom()}})(a);return window.particlesJS=n,window.pJSDom=o,window.Particles=t,{particlesJS:n,pJSDom:o,Particles:t}}})(),n})()));

package/tsparticles.pjs.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Particles.js v3.0.0-beta.4 by Matteo Bruni */
+/*! tsParticles Particles.js v3.0.0-beta.5 by Matteo Bruni */

package/types/VincentGarreau/IParticlesJS.d.ts

@@ -1,6 +1,117 @@
-import type { Container, ISourceOptions } from "@tsparticles/engine";
+import type { Container, IHsl, IRgb, IValueColor, InteractivityDetect, MoveDirection, OutMode } from "@tsparticles/engine";
+export interface IParticlesJSOptions {
+    interactivity: {
+        detect_on: InteractivityDetect | keyof typeof InteractivityDetect;
+        events: {
+            onclick: {
+                enable: boolean;
+                mode: string;
+            };
+            onhover: {
+                enable: boolean;
+                mode: string;
+            };
+            resize: boolean;
+        };
+        modes: {
+            bubble: {
+                distance: number;
+                duration: number;
+                opacity: number;
+                size: number;
+                speed: number;
+            };
+            grab: {
+                distance: number;
+                line_linked: {
+                    opacity: number;
+                };
+            };
+            push: {
+                particles_nb: number;
+            };
+            remove: {
+                particles_nb: number;
+            };
+            repulse: {
+                distance: number;
+                duration: number;
+            };
+        };
+    };
+    particles: {
+        color: {
+            value: string | IRgb | IHsl | IValueColor;
+        };
+        line_linked: {
+            color: string;
+            distance: number;
+            enable: boolean;
+            opacity: number;
+            width: number;
+        };
+        move: {
+            attract: {
+                enable: boolean;
+                rotateX: number;
+                rotateY: number;
+            };
+            bounce: boolean;
+            direction: MoveDirection | keyof typeof MoveDirection;
+            enable: boolean;
+            out_mode: OutMode | keyof typeof OutMode;
+            random: boolean;
+            speed: number;
+            straight: boolean;
+        };
+        number: {
+            density: {
+                enable: boolean;
+                value_area: number;
+            };
+            value: number;
+        };
+        opacity: {
+            anim: {
+                enable: boolean;
+                opacity_min: number;
+                speed: number;
+                sync: boolean;
+            };
+            random: boolean;
+            value: number;
+        };
+        shape: {
+            image: {
+                height: number;
+                replace_color?: boolean;
+                src: string;
+                width: number;
+            };
+            polygon: {
+                nb_sides: number;
+            };
+            stroke: {
+                color: string | IRgb | IHsl | IValueColor;
+                width: number;
+            };
+            type: string;
+        };
+        size: {
+            anim: {
+                enable: boolean;
+                size_min: number;
+                speed: number;
+                sync: boolean;
+            };
+            random: boolean;
+            value: number;
+        };
+    };
+    retina_detect: boolean;
+}
 export interface IParticlesJS {
-    (tagId: string, options: ISourceOptions): Promise<Container | undefined>;
+    (tagId: string, options: IParticlesJSOptions): Promise<Container | undefined>;
     load(tagId: string, pathConfigJson: string, callback: (container?: Container) => void): void;
     setOnClickHandler(callback: EventListenerOrEventListenerObject): void;
 }

package/umd/VincentGarreau/particles.js

@@ -4,15 +4,263 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
+        define(["require", "exports", "@tsparticles/engine"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.initParticlesJS = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const defaultPjsOptions = {
+        particles: {
+            number: {
+                value: 400,
+                density: {
+                    enable: true,
+                    value_area: 800,
+                },
+            },
+            color: {
+                value: "#fff",
+            },
+            shape: {
+                type: "circle",
+                stroke: {
+                    width: 0,
+                    color: "#ff0000",
+                },
+                polygon: {
+                    nb_sides: 5,
+                },
+                image: {
+                    src: "",
+                    width: 100,
+                    height: 100,
+                },
+            },
+            opacity: {
+                value: 1,
+                random: false,
+                anim: {
+                    enable: false,
+                    speed: 2,
+                    opacity_min: 0,
+                    sync: false,
+                },
+            },
+            size: {
+                value: 20,
+                random: false,
+                anim: {
+                    enable: false,
+                    speed: 20,
+                    size_min: 0,
+                    sync: false,
+                },
+            },
+            line_linked: {
+                enable: true,
+                distance: 100,
+                color: "#fff",
+                opacity: 1,
+                width: 1,
+            },
+            move: {
+                enable: true,
+                speed: 2,
+                direction: "none",
+                random: false,
+                straight: false,
+                out_mode: "out",
+                bounce: false,
+                attract: {
+                    enable: false,
+                    rotateX: 3000,
+                    rotateY: 3000,
+                },
+            },
+        },
+        interactivity: {
+            detect_on: "canvas",
+            events: {
+                onhover: {
+                    enable: true,
+                    mode: "grab",
+                },
+                onclick: {
+                    enable: true,
+                    mode: "push",
+                },
+                resize: true,
+            },
+            modes: {
+                grab: {
+                    distance: 100,
+                    line_linked: {
+                        opacity: 1,
+                    },
+                },
+                bubble: {
+                    distance: 200,
+                    size: 80,
+                    duration: 0.4,
+                    opacity: 1,
+                    speed: 3,
+                },
+                repulse: {
+                    distance: 200,
+                    duration: 0.4,
+                },
+                push: {
+                    particles_nb: 4,
+                },
+                remove: {
+                    particles_nb: 2,
+                },
+            },
+        },
+        retina_detect: false,
+    };
     const initParticlesJS = (engine) => {
         const particlesJS = (tagId, options) => {
-            return engine.load({ id: tagId, options });
+            const fixedOptions = (0, engine_1.deepExtend)(defaultPjsOptions, options);
+            return engine.load({
+                id: tagId,
+                options: {
+                    fullScreen: {
+                        enable: false,
+                    },
+                    detectRetina: fixedOptions.retina_detect,
+                    smooth: true,
+                    interactivity: {
+                        detectsOn: fixedOptions.interactivity.detect_on,
+                        events: {
+                            onHover: {
+                                enable: fixedOptions.interactivity.events.onhover.enable,
+                                mode: fixedOptions.interactivity.events.onhover.mode,
+                            },
+                            onClick: {
+                                enable: fixedOptions.interactivity.events.onclick.enable,
+                                mode: fixedOptions.interactivity.events.onclick.mode,
+                            },
+                            resize: {
+                                enable: fixedOptions.interactivity.events.resize,
+                            },
+                        },
+                        modes: {
+                            grab: {
+                                distance: fixedOptions.interactivity.modes.grab.distance,
+                                links: {
+                                    opacity: fixedOptions.interactivity.modes.grab.line_linked.opacity,
+                                },
+                            },
+                            bubble: {
+                                distance: fixedOptions.interactivity.modes.bubble.distance,
+                                size: fixedOptions.interactivity.modes.bubble.size,
+                                duration: fixedOptions.interactivity.modes.bubble.duration,
+                                opacity: fixedOptions.interactivity.modes.bubble.opacity,
+                                speed: fixedOptions.interactivity.modes.bubble.speed,
+                            },
+                            repulse: {
+                                distance: fixedOptions.interactivity.modes.repulse.distance,
+                                duration: fixedOptions.interactivity.modes.repulse.duration,
+                            },
+                            push: {
+                                quantity: fixedOptions.interactivity.modes.push.particles_nb,
+                            },
+                            remove: {
+                                quantity: fixedOptions.interactivity.modes.remove.particles_nb,
+                            },
+                        },
+                    },
+                    particles: {
+                        collisions: {
+                            enable: fixedOptions.particles.move.bounce,
+                        },
+                        number: {
+                            value: fixedOptions.particles.number.value,
+                            density: {
+                                enable: fixedOptions.particles.number.density.enable,
+                                width: fixedOptions.particles.number.density.value_area,
+                            },
+                        },
+                        color: {
+                            value: fixedOptions.particles.color.value,
+                        },
+                        stroke: {
+                            width: fixedOptions.particles.shape.stroke.width,
+                            color: {
+                                value: fixedOptions.particles.shape.stroke.color,
+                            },
+                        },
+                        shape: {
+                            type: fixedOptions.particles.shape.type,
+                            options: {
+                                polygon: {
+                                    sides: fixedOptions.particles.shape.polygon.nb_sides,
+                                },
+                                image: {
+                                    src: fixedOptions.particles.shape.image.src,
+                                    width: fixedOptions.particles.shape.image.width,
+                                    height: fixedOptions.particles.shape.image.height,
+                                },
+                            },
+                        },
+                        opacity: {
+                            value: fixedOptions.particles.opacity.random
+                                ? {
+                                    min: fixedOptions.particles.opacity.anim.enable
+                                        ? fixedOptions.particles.opacity.anim.opacity_min
+                                        : 0,
+                                    max: fixedOptions.particles.opacity.value,
+                                }
+                                : fixedOptions.particles.opacity.value,
+                            animation: {
+                                enable: fixedOptions.particles.opacity.anim.enable,
+                                speed: fixedOptions.particles.opacity.anim.speed,
+                                sync: fixedOptions.particles.opacity.anim.sync,
+                            },
+                        },
+                        size: {
+                            value: fixedOptions.particles.size.random
+                                ? {
+                                    min: fixedOptions.particles.size.anim.enable
+                                        ? fixedOptions.particles.size.anim.size_min
+                                        : 0,
+                                    max: fixedOptions.particles.size.value,
+                                }
+                                : fixedOptions.particles.size.value,
+                            animation: {
+                                enable: fixedOptions.particles.size.anim.enable,
+                                speed: fixedOptions.particles.size.anim.speed,
+                                sync: fixedOptions.particles.size.anim.sync,
+                            },
+                        },
+                        links: {
+                            enable: fixedOptions.particles.line_linked.enable,
+                            distance: fixedOptions.particles.line_linked.distance,
+                            color: fixedOptions.particles.line_linked.color,
+                            opacity: fixedOptions.particles.line_linked.opacity,
+                            width: fixedOptions.particles.line_linked.width,
+                        },
+                        move: {
+                            enable: fixedOptions.particles.move.enable,
+                            speed: fixedOptions.particles.move.speed / 3,
+                            direction: fixedOptions.particles.move.direction,
+                            random: fixedOptions.particles.move.random,
+                            straight: fixedOptions.particles.move.straight,
+                            outModes: fixedOptions.particles.move.out_mode,
+                            attract: {
+                                enable: fixedOptions.particles.move.attract.enable,
+                                rotate: {
+                                    x: fixedOptions.particles.move.attract.rotateX,
+                                    y: fixedOptions.particles.move.attract.rotateY,
+                                },
+                            },
+                        },
+                    },
+                },
+            });
         };
         particlesJS.load = (tagId, pathConfigJson, callback) => {
             engine