lazy load the particles and replace Among Us svg

app.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex min-h-screen w-screen flex-col bg-transparent font-mono">
-    <ParticlesBackground />
     <AppHeader @hover-link-change="changeHoveredLink" />
     <div class="flex flex-1 flex-col place-content-center place-items-center">
+      <ParticlesBackground />
       <NuxtPage :hovered-link="hoveredLink" />
     </div>
     <AppFooter />

components/ParticlesBackground.vue

@@ -1,14 +1,22 @@
 <template>
-  <NuxtParticles id="tsparticles" :options="options" class="absolute -z-10" />
+  <div
+    v-if="isLoading"
+    class="absolute -z-20 flex size-full place-content-center place-items-center bg-black text-center"
+  >
+    <span class="text-9xl uppercase">Loading background...</span>
+  </div>
+  <NuxtParticles
+    id="tsparticles"
+    :options="options"
+    class="absolute -z-10"
+    @load="onLoad"
+  />
 </template>
 
 <script setup lang="ts">
-import { tsParticles } from "@tsparticles/engine";
-import { loadSlim } from "@tsparticles/slim";
-import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
-
-await loadSlim(tsParticles);
-await loadEmittersPlugin(tsParticles);
+import type { Container } from "@tsparticles/engine";
+const isLoading = ref({});
+isLoading.value = true;
 
 const options = {
   background: { color: { value: "#000" } },
@@ -58,26 +66,24 @@ const options = {
         options: {
           images: {
             src: "/images/amogus.svg",
+            width: 128,
+            height: 167,
           },
         },
       },
-      size: { value: 75 },
+      size: { value: 65 },
       rotate: {
         value: { min: 0, max: 360 },
-        animation: { enable: true, speed: 15, sync: true },
+        animation: { enable: true, speed: 10, sync: true },
       },
     },
     position: { x: -5, y: 55 },
   },
-  interactivity: {
-    detectsOn: "window",
-    events: {
-      onClick: {
-        enable: true,
-        mode: "repulse",
-      },
-    },
-  },
-  fpsLimit: 60,
+};
+
+const onLoad = (container: Container) => {
+  container.pause();
+  isLoading.value = false;
+  container.play();
 };
 </script>

nuxt.config.ts

@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  ssr: false,
   app: {
     pageTransition: { name: "page", mode: "out-in" },
     head: {
@@ -18,7 +19,8 @@ export default defineNuxtConfig({
     dataValue: "theme",
   },
   particles: {
-    mode: "custom",
+    mode: "full",
+    lazy: true,
   },
   postcss: {
     plugins: {

pages/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="card w-64 bg-base-100/90 p-1 md:w-96">
-    <img :src="imageLink" />
+    <img v-if="hoveredLink == 'none'" src="/images/a_default.svg" />
+    <img v-if="hoveredLink == 'Home'" src="/images/a_smile.svg" />
+    <img v-if="hoveredLink == 'About'" src="/images/a_fun.svg" />
+    <img v-if="hoveredLink == 'CV'" src="/images/a_happy.svg" />
+    <img v-if="hoveredLink == 'Github'" src="/images/a_shock.svg" />
     <div class="card-body">
       <p class="text-center text-3xl">Hello, world!</p>
       <p class="text-lg">
@@ -31,23 +35,6 @@ const props = defineProps({
     default: "none",
   },
 });
-
-const imageLink = computed(() => {
-  switch (props.hoveredLink) {
-    case "none":
-      return "/images/a_default.svg";
-    case "Home":
-      return "/images/a_smile.svg";
-    case "About":
-      return "/images/a_fun.svg";
-    case "CV":
-      return "/images/a_happy.svg";
-    case "Github":
-      return "/images/a_shock.svg";
-    default:
-      return "/images/a_dead.svg";
-  }
-});
 </script>
 
 <style scoped></style>