Fix non loading particles

Safi1012 · Apr 2, 2024 · eda6b7d · eda6b7d
1 parent df2541d
commit eda6b7d
Showing 1 changed file with 55 additions and 53 deletions.
diff --git a/src/components/Particles.astro b/src/components/Particles.astro
@@ -2,70 +2,72 @@
   import { loadFull } from "tsparticles";
   import { tsParticles } from "@tsparticles/engine";
 
-  await loadFull(tsParticles);
+  document.addEventListener("DOMContentLoaded", async function (event) {
+    await loadFull(tsParticles);
 
-  await tsParticles.load({
-    id: "tsparticles",
-    options: {
-      particles: {
-        number: {
-          value: 4,
-          density: {
-            enable: true,
-            height: 600,
-            width: 1200,
+    await tsParticles.load({
+      id: "tsparticles",
+      options: {
+        particles: {
+          number: {
+            value: 4,
+            density: {
+              enable: true,
+              height: 600,
+              width: 1200,
+            },
           },
-        },
-        color: {
-          value: "#0873e8",
-        },
-        opacity: {
-          value: 0.5,
-          animation: {
-            enable: false,
-            speed: 1,
-            sync: false,
+          color: {
+            value: "#0873e8",
           },
-        },
-        size: {
-          value: 3,
-          animation: {
-            enable: false,
-            speed: 30,
-            sync: false,
+          opacity: {
+            value: 0.5,
+            animation: {
+              enable: false,
+              speed: 1,
+              sync: false,
+            },
           },
-        },
-        move: {
-          enable: true,
-          speed: 8,
-          direction: "none",
-          random: false,
-          straight: false,
-          outModes: "out",
-          attract: {
-            enable: false,
-            rotate: {
-              x: 600,
-              y: 1200,
+          size: {
+            value: 3,
+            animation: {
+              enable: false,
+              speed: 30,
+              sync: false,
             },
           },
-        },
-      },
-      interactivity: {
-        detect_on: "canvas",
-        events: {
-          onHover: {
+          move: {
             enable: true,
-            mode: "repulse",
+            speed: 8,
+            direction: "none",
+            random: false,
+            straight: false,
+            outModes: "out",
+            attract: {
+              enable: false,
+              rotate: {
+                x: 600,
+                y: 1200,
+              },
+            },
           },
-          onClick: {
-            enable: true,
-            mode: "push",
+        },
+        interactivity: {
+          detect_on: "canvas",
+          events: {
+            onHover: {
+              enable: true,
+              mode: "repulse",
+            },
+            onClick: {
+              enable: true,
+              mode: "push",
+            },
           },
         },
+        retina_detect: true,
       },
-      retina_detect: true,
-    },
+    });
   });
 </script>