Implemented Particles feature

package-lock.json

@@ -11,6 +11,8 @@
         "core-js": "^3.6.5",
         "lodash.clonedeep": "^4.5.0",
         "nanoevents": "^6.0.2",
+        "particles.vue3": "^2.0.3",
+        "tsparticles": "^2.0.3",
         "vue": "^3.2.26",
         "vue-next-select": "^2.10.2",
         "vue-panzoom": "^1.1.6",
@@ -9105,6 +9107,29 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/particles.vue3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/particles.vue3/-/particles.vue3-2.0.3.tgz",
+      "integrity": "sha512-FE2zbTCDpwP8Wzk2nDfVyuJkOtQHDHq2I+eqc7UYELc0IEKxtEaCJEjAfP0uAscP4Rl1hWW3MS63Fg7OqBmnvQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "dependencies": {
+        "core-js": "^3.20.1",
+        "tsparticles-engine": "^2.0.3",
+        "vue-class-component": "^8.0.0-rc.1"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/pascal-case": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
@@ -11558,6 +11583,362 @@
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
       "dev": true
     },
+    "node_modules/tsparticles": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-2.0.3.tgz",
+      "integrity": "sha512-aHWFfppS9VBd+zZVbV6wVqovo/xFQbKNzdy2fWNGAuomXRlz0nkU48jY1sarGz64SUGREIWgXvYgwIpwlKe17g==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3",
+        "tsparticles-interaction-external-trail": "^2.0.3",
+        "tsparticles-plugin-absorbers": "^2.0.3",
+        "tsparticles-plugin-emitters": "^2.0.3",
+        "tsparticles-plugin-polygon-mask": "^2.0.3",
+        "tsparticles-slim": "^2.0.3",
+        "tsparticles-updater-roll": "^2.0.3",
+        "tsparticles-updater-tilt": "^2.0.3",
+        "tsparticles-updater-wobble": "^2.0.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/matteobruni"
+      }
+    },
+    "node_modules/tsparticles-engine": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.3.tgz",
+      "integrity": "sha512-n54t3Qcdnz/wc6op38Q/nVwfi7d/m/HdiDdJsJy4DWAJnnu4YZLGoor9h76nuvfIeY7niTQWMLMxWBViAKOOEA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/matteobruni"
+        },
+        {
+          "type": "buymeacoffee",
+          "url": "https://www.buymeacoffee.com/matteobruni"
+        }
+      ],
+      "hasInstallScript": true
+    },
+    "node_modules/tsparticles-interaction-external-attract": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-attract/-/tsparticles-interaction-external-attract-2.0.3.tgz",
+      "integrity": "sha512-z0/+aM+AcKXd8AzE89SQA1jq7ZTnG+eF+x00aqNVBfiHvrch9+yLTudwk9Rmkiq5H1FStYk5kQZS0XS9lysf1g==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-bounce": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bounce/-/tsparticles-interaction-external-bounce-2.0.3.tgz",
+      "integrity": "sha512-ERu3wiOnKAmNAh/lUEp1M7eYX3ai/hQU5+BmNQrKJDGqr1MjrKhJ1Ar7OtBLjBNaxuq7tIGBvngVn4+CjeoMXQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-bubble": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bubble/-/tsparticles-interaction-external-bubble-2.0.3.tgz",
+      "integrity": "sha512-yOIy0QY9kDlvCwivQQkY3ezCHdDZ2WRYZNCdJARKxHG0lptZIT9hxqkONf1OYlQ+/dsHiT+4t1JIISYy9oYwEA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-connect": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-connect/-/tsparticles-interaction-external-connect-2.0.3.tgz",
+      "integrity": "sha512-M7tn4T4RbO4xNJ5Ki8EgLzC9+H+adaTbQfMOroJ9/l1zKVrQhPAGHeXOAQmdQb1QgaYB0HXk9MpIEJW393vdaQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-grab": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-grab/-/tsparticles-interaction-external-grab-2.0.3.tgz",
+      "integrity": "sha512-QT/HbkzOxbY8OVj9skP1oAs9CLHH6pN8ofDmyPJ+n3dCuknIE5BPDAHjaaxE79EP+ZpauTbdGYDaAVQEjhRgXA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-pause": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-pause/-/tsparticles-interaction-external-pause-2.0.3.tgz",
+      "integrity": "sha512-zmcYEWTKN8XecPR6ra97TVwGim/KxivW/WaG33XtNcilYLO3Oc6oWiQ7aHWIlf70pVyxZbcflWlsx6cSiwfJ5w==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-push": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-push/-/tsparticles-interaction-external-push-2.0.3.tgz",
+      "integrity": "sha512-nGodslff8JfjRayAxhB9qWvu6glZwqSegfZHxlYwwY1UIQAZ4jJwmlb2JXgpdpitv56RP4D9/pPU8bvf+IiazQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-remove": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-remove/-/tsparticles-interaction-external-remove-2.0.3.tgz",
+      "integrity": "sha512-PqKIPUBNV6hlfIReCqCglH3pUcvu7FWH1rTgIrgCjgIRnI4vmcw+Wkd5y1Hx0YwqFCdXrRJJ91e0c5FinMrJVA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-repulse": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-repulse/-/tsparticles-interaction-external-repulse-2.0.3.tgz",
+      "integrity": "sha512-ukBNBWK6h4SmYvqzWCpoygcHUZEOc6DDpysMJlIgtIzHeaOnuM8vEahxQWl5yNsvwTiuCTtc6RZ2sL+sg2KHWQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-external-trail": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-trail/-/tsparticles-interaction-external-trail-2.0.3.tgz",
+      "integrity": "sha512-n9aTNQV20tnzZq1ySAku8arjcNgrwY7jxHYMg/cZhez5mU8I6xKNIf+VZVo9F/X9nuMgyIC795BV43mlky/gqQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-particles-attract": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-attract/-/tsparticles-interaction-particles-attract-2.0.3.tgz",
+      "integrity": "sha512-rCSWDfwrHWt+/KO6Z4666S4R4gBpzyR0Hse1QwEiqNhwRdP2/QpwIpKU0pWnt/9HGzUvNYpAINH+bpIqWo2qcg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-particles-collisions": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-collisions/-/tsparticles-interaction-particles-collisions-2.0.3.tgz",
+      "integrity": "sha512-m/6VeYEHAUTvCWFYNNgURSK5dHnDBES8HextrkDCAxUjf/5wvJpwOVPELuGDNc5sWBD1T4hLrZVtIzbrYmxjwQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-interaction-particles-links": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-links/-/tsparticles-interaction-particles-links-2.0.3.tgz",
+      "integrity": "sha512-Rdh+FsfBYbQqtBsd2EYcSdjYAoRbzy9/VYquEc/Bzv8DgMs3jJv2/1BtekSfCSVvUGxZW9YoA+5e8e9n9hi32Q==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-move-base": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-move-base/-/tsparticles-move-base-2.0.3.tgz",
+      "integrity": "sha512-ZJSe0AYKXerb1aSAwZFcojirSLmlbsN7+8w8oRmbM5h1aJRg7BOa4OastMuNjOT9fjxL1xDNik/e3nx8xyByXg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-move-parallax": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-move-parallax/-/tsparticles-move-parallax-2.0.3.tgz",
+      "integrity": "sha512-rXj8PukEMizbhzWpM4/VvVFxnYs3oRIIEkQej1TmQeMsvg1wmi7qMV1YOGpmw/XjHBLDqwmYUtdn6p0FT6aXjQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-plugin-absorbers": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-absorbers/-/tsparticles-plugin-absorbers-2.0.3.tgz",
+      "integrity": "sha512-kh3QOZg2J/wMTbUU8+YmUeNhaQ1BRbPdZQH4PCE4PwgNkIduaZsX3ORuA1CPeqJ0zpS1xMGKGsWDgOfPJjaWJA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-plugin-emitters": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.0.3.tgz",
+      "integrity": "sha512-2XV7je3VH0N3vZdbcUcau/W8r7/95I1ziGRj0RrouK1gvOFZEcqzWELrz1s/HV26aNlYeESMCxba1fHNh84tyA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-plugin-polygon-mask": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-polygon-mask/-/tsparticles-plugin-polygon-mask-2.0.3.tgz",
+      "integrity": "sha512-EPV4xKQIrq1/ashtGv/gg4wTonOw76rSt6twHsG5cdubV6LQnJIYZg2scObIUgXnlpG4WG0p3nZiYMADdMnmRw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-shape-circle": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-circle/-/tsparticles-shape-circle-2.0.3.tgz",
+      "integrity": "sha512-irlKC6pqqvlHS4LHLNzh+LgRpAsMMkc45Wnk3xc7EXSP1hjaudS2GMX2lO85MoDXeZcl+hrA1unUt45atDwF3g==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-shape-image": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-image/-/tsparticles-shape-image-2.0.3.tgz",
+      "integrity": "sha512-Rf+7DDGUTEEKkIVAi+YRjbeigzJSkPZzedg+1AZxztF2HDT8sXNlgAePudvjoqyMDKyd1gDQW/16Yzkcx6hIow==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-shape-line": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-line/-/tsparticles-shape-line-2.0.3.tgz",
+      "integrity": "sha512-s7f0izNUUZyOvt3tcCCIbDsu4Ed8etIqEDdigctBP7k0gwHZAmsV9fyYqOfTF4DK5oPCzc/7OJTISiPOqt9CNg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-shape-polygon": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-polygon/-/tsparticles-shape-polygon-2.0.3.tgz",
+      "integrity": "sha512-2rslG14FKYbkmJNjs5wHQQud+lkWeponH36B1KJHQt1oGJhNT1aad1lnZ3JQaG/WHvXlIrT16pLolZW9KArpqg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-shape-square": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-square/-/tsparticles-shape-square-2.0.3.tgz",
+      "integrity": "sha512-ra5fxTpLbsunJaxkc2AQzz9njwN7d/3jAZL8yuLwaSEiu8UyWp+8fMzHXuGY5hzp61BGGxtIQ4zfrF/9WK1/iQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-shape-star": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-star/-/tsparticles-shape-star-2.0.3.tgz",
+      "integrity": "sha512-/m/fzmfjExRYaVFCHUu1rp1PgybL16si69kU7b1+5s774D+/Mbpk0XplAEWLiv+YX1ifRk7YUi5O5MLWZ9+7bw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-shape-text": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-text/-/tsparticles-shape-text-2.0.3.tgz",
+      "integrity": "sha512-8g3yL3kAcW+XgH5nRNT4nsWGzbVoUoOGhG7yD6vnvHWJhcsGAdk6qn/1MxJ45yUll4Fl/p8ZJcg2jywDmujf3g==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-slim": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-slim/-/tsparticles-slim-2.0.3.tgz",
+      "integrity": "sha512-RQX+ZGdJEthYUOX5U6GLWw3xiOYo11HI0E+9b53hQh5H1VcUEHvX6ITVwRqMohD04VtkA4Hw33PdOnfjtM3G/g==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3",
+        "tsparticles-interaction-external-attract": "^2.0.3",
+        "tsparticles-interaction-external-bounce": "^2.0.3",
+        "tsparticles-interaction-external-bubble": "^2.0.3",
+        "tsparticles-interaction-external-connect": "^2.0.3",
+        "tsparticles-interaction-external-grab": "^2.0.3",
+        "tsparticles-interaction-external-pause": "^2.0.3",
+        "tsparticles-interaction-external-push": "^2.0.3",
+        "tsparticles-interaction-external-remove": "^2.0.3",
+        "tsparticles-interaction-external-repulse": "^2.0.3",
+        "tsparticles-interaction-particles-attract": "^2.0.3",
+        "tsparticles-interaction-particles-collisions": "^2.0.3",
+        "tsparticles-interaction-particles-links": "^2.0.3",
+        "tsparticles-move-base": "^2.0.3",
+        "tsparticles-move-parallax": "^2.0.3",
+        "tsparticles-shape-circle": "^2.0.3",
+        "tsparticles-shape-image": "^2.0.3",
+        "tsparticles-shape-line": "^2.0.3",
+        "tsparticles-shape-polygon": "^2.0.3",
+        "tsparticles-shape-square": "^2.0.3",
+        "tsparticles-shape-star": "^2.0.3",
+        "tsparticles-shape-text": "^2.0.3",
+        "tsparticles-updater-angle": "^2.0.3",
+        "tsparticles-updater-color": "^2.0.3",
+        "tsparticles-updater-life": "^2.0.3",
+        "tsparticles-updater-opacity": "^2.0.3",
+        "tsparticles-updater-out-modes": "^2.0.3",
+        "tsparticles-updater-size": "^2.0.3",
+        "tsparticles-updater-stroke-color": "^2.0.3"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/matteobruni"
+      }
+    },
+    "node_modules/tsparticles-updater-angle": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-angle/-/tsparticles-updater-angle-2.0.3.tgz",
+      "integrity": "sha512-Fu39U7WLeUfeiUDQhwnobyOrNVrWsIdM08m2TBaVjqXBt4WWilO4Xs+5SbDyCWxQ0hFwUgNcHdnm80AX9608LQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-updater-color": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-color/-/tsparticles-updater-color-2.0.3.tgz",
+      "integrity": "sha512-h2Ml4WIKqLlIZVngzP2WD+vsKDVWQyZelrXjW0a02zmsue1ZMexZhNwjCf2Vp+weaQLVGhzP+nKbzcYasKdydQ==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-updater-life": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-life/-/tsparticles-updater-life-2.0.3.tgz",
+      "integrity": "sha512-ISw1LVBkz6CVUaVecA6s2LEe9JzyuE9aQRv2LDK3eV1Lz3QrdyPlMt1MjccHa1K/AUp+RVPhIWKKKe4UBqFJFA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-updater-opacity": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.0.3.tgz",
+      "integrity": "sha512-AFBhPKfD5mzhEQzfYUHZ79heWQ8UuskTKgylLceXr41mzGEr3AMtOuBcRkQUpYhKThhlDbrWecMPCYk6VQfhOw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-updater-out-modes": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.0.3.tgz",
+      "integrity": "sha512-6lYjRrp0XIvEQTcERQhqm7nfz4NMCXqmUWzBUr6R/F7lMKM75eMK6Q6hmSQDgkdyVzvY7j9enHjTBeZXxyCrqA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-updater-roll": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-roll/-/tsparticles-updater-roll-2.0.3.tgz",
+      "integrity": "sha512-sm7TkU/0ErVUBDnRUCYjH1OonHs+P/C8gtiVrRhvowQTdpSl5a1x+UoSu6aHzPxZZVCBhDmkACNC0JuOa6uucw==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-updater-size": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-size/-/tsparticles-updater-size-2.0.3.tgz",
+      "integrity": "sha512-dIkse7f9ZhOXFtPKyinzOQul75MRO29kzXMMU1vsOsLdNB6+8/LL44pvLRdrJA/6JUeuspMeMEtMvwtAyPeA+A==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-updater-stroke-color": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.0.3.tgz",
+      "integrity": "sha512-iQLiYpbPDbM+NqnLZPv7Th12Mq4CLSFLXr6zvZi09TLVgRl9sLur046AHyLP5IuetvwwaOxKkKEGAg7VlvR6lA==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-updater-tilt": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-tilt/-/tsparticles-updater-tilt-2.0.3.tgz",
+      "integrity": "sha512-04L7qsP47X9Mt6esAvk4/avfHQQI94h+/NiKbZ7HNJjcKbCvQp9LaplQCFGvr9t1IxFT9aQAmRP2KInVAelw5g==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "node_modules/tsparticles-updater-wobble": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-wobble/-/tsparticles-updater-wobble-2.0.3.tgz",
+      "integrity": "sha512-oToq/HwaA6OHjO8j7u8oT3I8/pJhOCNldX3XoZAgiaA3E8E19g8iD/0tWIkP4D/4o+I7NkJLv0wTcd5DJyueGg==",
+      "dependencies": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
     "node_modules/tsutils": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
@@ -11760,6 +12141,14 @@
         "@vue/shared": "3.2.26"
       }
     },
+    "node_modules/vue-class-component": {
+      "version": "8.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
+      "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz",
@@ -19555,6 +19944,16 @@
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
       "dev": true
     },
+    "particles.vue3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/particles.vue3/-/particles.vue3-2.0.3.tgz",
+      "integrity": "sha512-FE2zbTCDpwP8Wzk2nDfVyuJkOtQHDHq2I+eqc7UYELc0IEKxtEaCJEjAfP0uAscP4Rl1hWW3MS63Fg7OqBmnvQ==",
+      "requires": {
+        "core-js": "^3.20.1",
+        "tsparticles-engine": "^2.0.3",
+        "vue-class-component": "^8.0.0-rc.1"
+      }
+    },
     "pascal-case": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
@@ -21319,6 +21718,343 @@
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
       "dev": true
     },
+    "tsparticles": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-2.0.3.tgz",
+      "integrity": "sha512-aHWFfppS9VBd+zZVbV6wVqovo/xFQbKNzdy2fWNGAuomXRlz0nkU48jY1sarGz64SUGREIWgXvYgwIpwlKe17g==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3",
+        "tsparticles-interaction-external-trail": "^2.0.3",
+        "tsparticles-plugin-absorbers": "^2.0.3",
+        "tsparticles-plugin-emitters": "^2.0.3",
+        "tsparticles-plugin-polygon-mask": "^2.0.3",
+        "tsparticles-slim": "^2.0.3",
+        "tsparticles-updater-roll": "^2.0.3",
+        "tsparticles-updater-tilt": "^2.0.3",
+        "tsparticles-updater-wobble": "^2.0.3"
+      }
+    },
+    "tsparticles-engine": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-engine/-/tsparticles-engine-2.0.3.tgz",
+      "integrity": "sha512-n54t3Qcdnz/wc6op38Q/nVwfi7d/m/HdiDdJsJy4DWAJnnu4YZLGoor9h76nuvfIeY7niTQWMLMxWBViAKOOEA=="
+    },
+    "tsparticles-interaction-external-attract": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-attract/-/tsparticles-interaction-external-attract-2.0.3.tgz",
+      "integrity": "sha512-z0/+aM+AcKXd8AzE89SQA1jq7ZTnG+eF+x00aqNVBfiHvrch9+yLTudwk9Rmkiq5H1FStYk5kQZS0XS9lysf1g==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-external-bounce": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bounce/-/tsparticles-interaction-external-bounce-2.0.3.tgz",
+      "integrity": "sha512-ERu3wiOnKAmNAh/lUEp1M7eYX3ai/hQU5+BmNQrKJDGqr1MjrKhJ1Ar7OtBLjBNaxuq7tIGBvngVn4+CjeoMXQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-external-bubble": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-bubble/-/tsparticles-interaction-external-bubble-2.0.3.tgz",
+      "integrity": "sha512-yOIy0QY9kDlvCwivQQkY3ezCHdDZ2WRYZNCdJARKxHG0lptZIT9hxqkONf1OYlQ+/dsHiT+4t1JIISYy9oYwEA==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-external-connect": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-connect/-/tsparticles-interaction-external-connect-2.0.3.tgz",
+      "integrity": "sha512-M7tn4T4RbO4xNJ5Ki8EgLzC9+H+adaTbQfMOroJ9/l1zKVrQhPAGHeXOAQmdQb1QgaYB0HXk9MpIEJW393vdaQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-external-grab": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-grab/-/tsparticles-interaction-external-grab-2.0.3.tgz",
+      "integrity": "sha512-QT/HbkzOxbY8OVj9skP1oAs9CLHH6pN8ofDmyPJ+n3dCuknIE5BPDAHjaaxE79EP+ZpauTbdGYDaAVQEjhRgXA==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-external-pause": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-pause/-/tsparticles-interaction-external-pause-2.0.3.tgz",
+      "integrity": "sha512-zmcYEWTKN8XecPR6ra97TVwGim/KxivW/WaG33XtNcilYLO3Oc6oWiQ7aHWIlf70pVyxZbcflWlsx6cSiwfJ5w==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-external-push": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-push/-/tsparticles-interaction-external-push-2.0.3.tgz",
+      "integrity": "sha512-nGodslff8JfjRayAxhB9qWvu6glZwqSegfZHxlYwwY1UIQAZ4jJwmlb2JXgpdpitv56RP4D9/pPU8bvf+IiazQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-external-remove": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-remove/-/tsparticles-interaction-external-remove-2.0.3.tgz",
+      "integrity": "sha512-PqKIPUBNV6hlfIReCqCglH3pUcvu7FWH1rTgIrgCjgIRnI4vmcw+Wkd5y1Hx0YwqFCdXrRJJ91e0c5FinMrJVA==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-external-repulse": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-repulse/-/tsparticles-interaction-external-repulse-2.0.3.tgz",
+      "integrity": "sha512-ukBNBWK6h4SmYvqzWCpoygcHUZEOc6DDpysMJlIgtIzHeaOnuM8vEahxQWl5yNsvwTiuCTtc6RZ2sL+sg2KHWQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-external-trail": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-external-trail/-/tsparticles-interaction-external-trail-2.0.3.tgz",
+      "integrity": "sha512-n9aTNQV20tnzZq1ySAku8arjcNgrwY7jxHYMg/cZhez5mU8I6xKNIf+VZVo9F/X9nuMgyIC795BV43mlky/gqQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-particles-attract": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-attract/-/tsparticles-interaction-particles-attract-2.0.3.tgz",
+      "integrity": "sha512-rCSWDfwrHWt+/KO6Z4666S4R4gBpzyR0Hse1QwEiqNhwRdP2/QpwIpKU0pWnt/9HGzUvNYpAINH+bpIqWo2qcg==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-particles-collisions": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-collisions/-/tsparticles-interaction-particles-collisions-2.0.3.tgz",
+      "integrity": "sha512-m/6VeYEHAUTvCWFYNNgURSK5dHnDBES8HextrkDCAxUjf/5wvJpwOVPELuGDNc5sWBD1T4hLrZVtIzbrYmxjwQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-interaction-particles-links": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-interaction-particles-links/-/tsparticles-interaction-particles-links-2.0.3.tgz",
+      "integrity": "sha512-Rdh+FsfBYbQqtBsd2EYcSdjYAoRbzy9/VYquEc/Bzv8DgMs3jJv2/1BtekSfCSVvUGxZW9YoA+5e8e9n9hi32Q==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-move-base": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-move-base/-/tsparticles-move-base-2.0.3.tgz",
+      "integrity": "sha512-ZJSe0AYKXerb1aSAwZFcojirSLmlbsN7+8w8oRmbM5h1aJRg7BOa4OastMuNjOT9fjxL1xDNik/e3nx8xyByXg==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-move-parallax": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-move-parallax/-/tsparticles-move-parallax-2.0.3.tgz",
+      "integrity": "sha512-rXj8PukEMizbhzWpM4/VvVFxnYs3oRIIEkQej1TmQeMsvg1wmi7qMV1YOGpmw/XjHBLDqwmYUtdn6p0FT6aXjQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-plugin-absorbers": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-absorbers/-/tsparticles-plugin-absorbers-2.0.3.tgz",
+      "integrity": "sha512-kh3QOZg2J/wMTbUU8+YmUeNhaQ1BRbPdZQH4PCE4PwgNkIduaZsX3ORuA1CPeqJ0zpS1xMGKGsWDgOfPJjaWJA==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-plugin-emitters": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.0.3.tgz",
+      "integrity": "sha512-2XV7je3VH0N3vZdbcUcau/W8r7/95I1ziGRj0RrouK1gvOFZEcqzWELrz1s/HV26aNlYeESMCxba1fHNh84tyA==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-plugin-polygon-mask": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-plugin-polygon-mask/-/tsparticles-plugin-polygon-mask-2.0.3.tgz",
+      "integrity": "sha512-EPV4xKQIrq1/ashtGv/gg4wTonOw76rSt6twHsG5cdubV6LQnJIYZg2scObIUgXnlpG4WG0p3nZiYMADdMnmRw==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-shape-circle": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-circle/-/tsparticles-shape-circle-2.0.3.tgz",
+      "integrity": "sha512-irlKC6pqqvlHS4LHLNzh+LgRpAsMMkc45Wnk3xc7EXSP1hjaudS2GMX2lO85MoDXeZcl+hrA1unUt45atDwF3g==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-shape-image": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-image/-/tsparticles-shape-image-2.0.3.tgz",
+      "integrity": "sha512-Rf+7DDGUTEEKkIVAi+YRjbeigzJSkPZzedg+1AZxztF2HDT8sXNlgAePudvjoqyMDKyd1gDQW/16Yzkcx6hIow==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-shape-line": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-line/-/tsparticles-shape-line-2.0.3.tgz",
+      "integrity": "sha512-s7f0izNUUZyOvt3tcCCIbDsu4Ed8etIqEDdigctBP7k0gwHZAmsV9fyYqOfTF4DK5oPCzc/7OJTISiPOqt9CNg==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-shape-polygon": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-polygon/-/tsparticles-shape-polygon-2.0.3.tgz",
+      "integrity": "sha512-2rslG14FKYbkmJNjs5wHQQud+lkWeponH36B1KJHQt1oGJhNT1aad1lnZ3JQaG/WHvXlIrT16pLolZW9KArpqg==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-shape-square": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-square/-/tsparticles-shape-square-2.0.3.tgz",
+      "integrity": "sha512-ra5fxTpLbsunJaxkc2AQzz9njwN7d/3jAZL8yuLwaSEiu8UyWp+8fMzHXuGY5hzp61BGGxtIQ4zfrF/9WK1/iQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-shape-star": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-star/-/tsparticles-shape-star-2.0.3.tgz",
+      "integrity": "sha512-/m/fzmfjExRYaVFCHUu1rp1PgybL16si69kU7b1+5s774D+/Mbpk0XplAEWLiv+YX1ifRk7YUi5O5MLWZ9+7bw==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-shape-text": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-shape-text/-/tsparticles-shape-text-2.0.3.tgz",
+      "integrity": "sha512-8g3yL3kAcW+XgH5nRNT4nsWGzbVoUoOGhG7yD6vnvHWJhcsGAdk6qn/1MxJ45yUll4Fl/p8ZJcg2jywDmujf3g==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-slim": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-slim/-/tsparticles-slim-2.0.3.tgz",
+      "integrity": "sha512-RQX+ZGdJEthYUOX5U6GLWw3xiOYo11HI0E+9b53hQh5H1VcUEHvX6ITVwRqMohD04VtkA4Hw33PdOnfjtM3G/g==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3",
+        "tsparticles-interaction-external-attract": "^2.0.3",
+        "tsparticles-interaction-external-bounce": "^2.0.3",
+        "tsparticles-interaction-external-bubble": "^2.0.3",
+        "tsparticles-interaction-external-connect": "^2.0.3",
+        "tsparticles-interaction-external-grab": "^2.0.3",
+        "tsparticles-interaction-external-pause": "^2.0.3",
+        "tsparticles-interaction-external-push": "^2.0.3",
+        "tsparticles-interaction-external-remove": "^2.0.3",
+        "tsparticles-interaction-external-repulse": "^2.0.3",
+        "tsparticles-interaction-particles-attract": "^2.0.3",
+        "tsparticles-interaction-particles-collisions": "^2.0.3",
+        "tsparticles-interaction-particles-links": "^2.0.3",
+        "tsparticles-move-base": "^2.0.3",
+        "tsparticles-move-parallax": "^2.0.3",
+        "tsparticles-shape-circle": "^2.0.3",
+        "tsparticles-shape-image": "^2.0.3",
+        "tsparticles-shape-line": "^2.0.3",
+        "tsparticles-shape-polygon": "^2.0.3",
+        "tsparticles-shape-square": "^2.0.3",
+        "tsparticles-shape-star": "^2.0.3",
+        "tsparticles-shape-text": "^2.0.3",
+        "tsparticles-updater-angle": "^2.0.3",
+        "tsparticles-updater-color": "^2.0.3",
+        "tsparticles-updater-life": "^2.0.3",
+        "tsparticles-updater-opacity": "^2.0.3",
+        "tsparticles-updater-out-modes": "^2.0.3",
+        "tsparticles-updater-size": "^2.0.3",
+        "tsparticles-updater-stroke-color": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-angle": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-angle/-/tsparticles-updater-angle-2.0.3.tgz",
+      "integrity": "sha512-Fu39U7WLeUfeiUDQhwnobyOrNVrWsIdM08m2TBaVjqXBt4WWilO4Xs+5SbDyCWxQ0hFwUgNcHdnm80AX9608LQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-color": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-color/-/tsparticles-updater-color-2.0.3.tgz",
+      "integrity": "sha512-h2Ml4WIKqLlIZVngzP2WD+vsKDVWQyZelrXjW0a02zmsue1ZMexZhNwjCf2Vp+weaQLVGhzP+nKbzcYasKdydQ==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-life": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-life/-/tsparticles-updater-life-2.0.3.tgz",
+      "integrity": "sha512-ISw1LVBkz6CVUaVecA6s2LEe9JzyuE9aQRv2LDK3eV1Lz3QrdyPlMt1MjccHa1K/AUp+RVPhIWKKKe4UBqFJFA==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-opacity": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.0.3.tgz",
+      "integrity": "sha512-AFBhPKfD5mzhEQzfYUHZ79heWQ8UuskTKgylLceXr41mzGEr3AMtOuBcRkQUpYhKThhlDbrWecMPCYk6VQfhOw==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-out-modes": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.0.3.tgz",
+      "integrity": "sha512-6lYjRrp0XIvEQTcERQhqm7nfz4NMCXqmUWzBUr6R/F7lMKM75eMK6Q6hmSQDgkdyVzvY7j9enHjTBeZXxyCrqA==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-roll": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-roll/-/tsparticles-updater-roll-2.0.3.tgz",
+      "integrity": "sha512-sm7TkU/0ErVUBDnRUCYjH1OonHs+P/C8gtiVrRhvowQTdpSl5a1x+UoSu6aHzPxZZVCBhDmkACNC0JuOa6uucw==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-size": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-size/-/tsparticles-updater-size-2.0.3.tgz",
+      "integrity": "sha512-dIkse7f9ZhOXFtPKyinzOQul75MRO29kzXMMU1vsOsLdNB6+8/LL44pvLRdrJA/6JUeuspMeMEtMvwtAyPeA+A==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-stroke-color": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.0.3.tgz",
+      "integrity": "sha512-iQLiYpbPDbM+NqnLZPv7Th12Mq4CLSFLXr6zvZi09TLVgRl9sLur046AHyLP5IuetvwwaOxKkKEGAg7VlvR6lA==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-tilt": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-tilt/-/tsparticles-updater-tilt-2.0.3.tgz",
+      "integrity": "sha512-04L7qsP47X9Mt6esAvk4/avfHQQI94h+/NiKbZ7HNJjcKbCvQp9LaplQCFGvr9t1IxFT9aQAmRP2KInVAelw5g==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
+    "tsparticles-updater-wobble": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tsparticles-updater-wobble/-/tsparticles-updater-wobble-2.0.3.tgz",
+      "integrity": "sha512-oToq/HwaA6OHjO8j7u8oT3I8/pJhOCNldX3XoZAgiaA3E8E19g8iD/0tWIkP4D/4o+I7NkJLv0wTcd5DJyueGg==",
+      "requires": {
+        "tsparticles-engine": "^2.0.3"
+      }
+    },
     "tsutils": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
@@ -21474,6 +22210,12 @@
         "@vue/shared": "3.2.26"
       }
     },
+    "vue-class-component": {
+      "version": "8.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-8.0.0-rc.1.tgz",
+      "integrity": "sha512-w1nMzsT/UdbDAXKqhwTmSoyuJzUXKrxLE77PCFVuC6syr8acdFDAq116xgvZh9UCuV0h+rlCtxXolr3Hi3HyPQ==",
+      "requires": {}
+    },
     "vue-eslint-parser": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.0.1.tgz",

package.json

@@ -12,6 +12,8 @@
     "core-js": "^3.6.5",
     "lodash.clonedeep": "^4.5.0",
     "nanoevents": "^6.0.2",
+    "particles.vue3": "^2.0.3",
+    "tsparticles": "^2.0.3",
     "vue": "^3.2.26",
     "vue-next-select": "^2.10.2",
     "vue-panzoom": "^1.1.6",

src/App.vue

@@ -6,10 +6,13 @@
         <TPS v-if="unref(showTPS)" />
         <GameOverScreen />
         <NaNScreen />
+        <component :is="gameComponent" />
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
+import { jsx } from "features/feature";
+import { coerceComponent, render } from "util/vue";
 import { computed, toRef, unref } from "vue";
 import Game from "./components/Game.vue";
 import GameOverScreen from "./components/GameOverScreen.vue";
@@ -18,7 +21,7 @@ import Nav from "./components/Nav.vue";
 import TPS from "./components/TPS.vue";
 import projInfo from "./data/projInfo.json";
 import themes from "./data/themes";
-import settings from "./game/settings";
+import settings, { gameComponents } from "./game/settings";
 import "./main.css";
 
 function updateMouse(/* event */) {
@@ -28,6 +31,10 @@ function updateMouse(/* event */) {
 const useHeader = projInfo.useHeader;
 const theme = computed(() => themes[settings.theme].variables);
 const showTPS = toRef(settings, "showTPS");
+
+const gameComponent = computed(() => {
+    return coerceComponent(jsx(() => <>{gameComponents.map(render)}</>));
+});
 </script>
 
 <style scoped>

src/features/particles/Particles.vue

@@ -0,0 +1,54 @@
+<template>
+    <Particles
+        id="particles"
+        ref="particles"
+        :particlesInit="particlesInit"
+        :options="{
+            fpsLimit: 60,
+            fullScreen: { zIndex: 1 },
+            particles: {
+                number: {
+                    value: 0
+                }
+            },
+            emitters: {
+                autoPlay: false
+            }
+        }"
+    />
+</template>
+
+<script lang="tsx">
+import { loadFull } from "tsparticles";
+import { Engine } from "tsparticles-engine";
+import { Emitters } from "tsparticles-plugin-emitters/Emitters";
+import { defineComponent, nextTick, ref } from "vue";
+import { ParticlesComponent } from "particles.vue3";
+
+// TODO get typing support on the Particles component
+export default defineComponent({
+    emits: ["init"],
+    components: { Particles: ParticlesComponent },
+    setup(props, { emit }) {
+        const particles = ref<null | { particles: { container: Emitters } }>(null);
+
+        async function particlesInit(engine: Engine) {
+            await loadFull(engine);
+            finishInit(engine);
+        }
+
+        function finishInit(engine: Engine) {
+            if (engine.domArray.length) {
+                emit("init", engine.domItem(0));
+            } else {
+                nextTick(() => finishInit(engine));
+            }
+        }
+
+        return {
+            particles,
+            particlesInit
+        };
+    }
+});
+</script>

src/features/particles/particles.tsx

@@ -0,0 +1,43 @@
+import ParticlesComponent from "./Particles.vue";
+import { IEmitter } from "tsparticles-plugin-emitters/Options/Interfaces/IEmitter";
+import { EmitterInstance } from "tsparticles-plugin-emitters/EmitterInstance";
+import { EmitterContainer } from "tsparticles-plugin-emitters/EmitterContainer";
+import { ICoordinates } from "tsparticles-engine";
+import { Ref, shallowRef } from "vue";
+import { registerGameComponent } from "game/settings";
+import { jsx } from "features/feature";
+
+registerGameComponent(jsx(() => <ParticlesComponent onInit={onInit} />));
+
+const containerRef: Ref<null | EmitterContainer> = shallowRef(null);
+
+let emittersToAdd: {
+    resolve: (value: EmitterInstance | PromiseLike<EmitterInstance>) => void;
+    options: IEmitter & { particles: Required<IEmitter>["particles"] };
+    position: ICoordinates;
+}[] = [];
+
+export function addEmitter(
+    options: IEmitter & { particles: Required<IEmitter>["particles"] },
+    position: ICoordinates
+): Promise<EmitterInstance> {
+    if (containerRef.value) {
+        return Promise.resolve(containerRef.value.addEmitter(options, position));
+    }
+    return new Promise<EmitterInstance>(resolve => {
+        emittersToAdd.push({ resolve, options, position });
+    });
+}
+
+export function removeEmitter(emitter: EmitterInstance) {
+    // TODO I can't find a proper way to remove an emitter without accessing private functions
+    emitter.emitters.removeEmitter(emitter);
+}
+
+function onInit(container: EmitterContainer) {
+    containerRef.value = container;
+    emittersToAdd.forEach(({ resolve, options, position }) =>
+        resolve(container.addEmitter(options, position))
+    );
+    emittersToAdd = [];
+}

src/features/trees/tree.ts

@@ -24,7 +24,7 @@ import {
     ProcessedComputable
 } from "util/computed";
 import { createLazyProxy } from "util/proxies";
-import { computed, ref, Ref, unref } from "vue";
+import { computed, ref, Ref, shallowRef, unref } from "vue";
 
 export const TreeNodeType = Symbol("TreeNode");
 export const TreeType = Symbol("Tree");
@@ -175,7 +175,7 @@ export function createTree<T extends TreeOptions>(
         tree[Component] = TreeComponent;
 
         tree.isResetting = ref(false);
-        tree.resettingNode = ref(null);
+        tree.resettingNode = shallowRef(null);
 
         tree.reset = function (node) {
             const genericTree = tree as GenericTree;

src/game/settings.ts

@@ -67,3 +67,8 @@ export const infoComponents: CoercableComponent[] = reactive([]);
 export function registerInfoComponent(component: CoercableComponent) {
     infoComponents.push(component);
 }
+
+export const gameComponents: CoercableComponent[] = reactive([]);
+export function registerGameComponent(component: CoercableComponent) {
+    gameComponents.push(component);
+}

src/lib/tsParticles.d.ts

@@ -0,0 +1 @@
+declare module "particles.vue3";