Update tsparticles to use new repo (#24688)

Author: wendevlin

package.json

@@ -91,6 +91,8 @@
     "@replit/codemirror-indentation-markers": "6.5.3",
     "@shoelace-style/shoelace": "2.20.1",
     "@thomasloven/round-slider": "0.6.0",
+    "@tsparticles/engine": "3.8.1",
+    "@tsparticles/preset-links": "3.2.0",
     "@vaadin/combo-box": "24.7.1",
     "@vaadin/vaadin-themable-mixin": "24.7.1",
     "@vibrant/color": "4.0.0",
@@ -137,8 +139,6 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "tsparticles-engine": "2.12.0",
-    "tsparticles-preset-links": "2.12.0",
     "ua-parser-js": "2.0.3",
     "vis-data": "7.1.9",
     "vis-network": "9.1.9",

renovate.json

@@ -37,7 +37,7 @@
     {
       "description": "Group tsparticles engine and presets",
       "groupName": "tsparticles",
-      "matchPackageNames": ["tsparticles-engine", "tsparticles-preset-{/,}**"]
+      "matchPackageNames": ["@tsparticles/engine", "@tsparticles/preset-{/,}**"]
     },
     {
       "description": "Group date-fns with dependent timezone package",

src/resources/particles.ts

@@ -1,89 +1,78 @@
-import { tsParticles } from "tsparticles-engine";
-import { loadLinksPreset } from "tsparticles-preset-links";
+import { tsParticles } from "@tsparticles/engine";
+import { loadLinksPreset } from "@tsparticles/preset-links";
 import { DEFAULT_PRIMARY_COLOR } from "./styles-data";
 
 loadLinksPreset(tsParticles).then(() => {
-  tsParticles.load("particles", {
-    preset: "links",
-    background: {
-      opacity: 0,
-    },
-    fullScreen: {
-      enable: true,
-      zIndex: -1,
-    },
-    detectRetina: true,
-    fpsLimit: 60,
-    motion: {
-      disable: false,
-      reduce: {
-        factor: 4,
-        value: true,
+  tsParticles.load({
+    id: "particles",
+    options: {
+      preset: "links",
+      background: {
+        opacity: 0,
       },
-    },
-    particles: {
-      color: {
-        value: DEFAULT_PRIMARY_COLOR,
-      },
-      animation: {
+      fullScreen: {
         enable: true,
-        speed: 50,
-        sync: false,
+        zIndex: -1,
       },
-      links: {
-        color: {
-          value: DEFAULT_PRIMARY_COLOR,
+      detectRetina: true,
+      fpsLimit: 60,
+      motion: {
+        disable: false,
+        reduce: {
+          factor: 4,
+          value: true,
         },
-        distance: 100,
-        enable: true,
-        frequency: 1,
-        opacity: 0.7,
-        width: 1,
-      },
-      move: {
-        enable: true,
-        speed: 0.5,
       },
-      number: {
-        density: {
-          enable: true,
-          area: 800,
-          factor: 1000,
+      particles: {
+        color: {
+          value: DEFAULT_PRIMARY_COLOR,
         },
-        limit: 0,
-        value: 50,
-      },
-      opacity: {
-        random: {
+        links: {
+          color: {
+            value: DEFAULT_PRIMARY_COLOR,
+          },
+          distance: 100,
           enable: true,
-          minimumValue: 0.3,
+          frequency: 1,
+          opacity: 0.7,
+          width: 1,
         },
-        value: 0.5,
-        animation: {
-          destroy: "none",
+        move: {
           enable: true,
-          minimumValue: 0.3,
           speed: 0.5,
-          startValue: "random",
-          sync: false,
         },
-      },
-      size: {
-        random: {
-          enable: true,
-          minimumValue: 1,
+        number: {
+          limit: undefined,
+          value: 50,
         },
-        value: 3,
-        animation: {
-          destroy: "none",
-          enable: true,
-          minimumValue: 1,
-          speed: 3,
-          startValue: "random",
-          sync: false,
+        opacity: {
+          value: {
+            min: 0.3,
+            max: 0.5,
+          },
+          animation: {
+            destroy: "none",
+            enable: true,
+            speed: 0.5,
+            startValue: "random",
+            sync: false,
+          },
+        },
+        size: {
+          value: {
+            min: 1,
+            max: 3,
+          },
+          animation: {
+            destroy: "none",
+            enable: true,
+            speed: 3,
+            startValue: "random",
+            sync: false,
+          },
         },
       },
+      pauseOnBlur: true,
     },
-    pauseOnBlur: true,
   });
 });