feat: implement starshine glitter

app.vue

@@ -1,25 +1,7 @@
 <template>
-  <main
-    class="h-[100vh] items-center justify-center p-5 flex flex-col space-y-4 bg-[#fa86c4]"
-  >
-    <NuxtRouteAnnouncer />
-
-    <h1
-      class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white"
-    >
-      ✨ Lilou ✨
-    </h1>
-    <img
-      class="w-full max-w-[50vh]"
-      src="http://localhost:3000/api"
-      alt="Lilou"
-    />
-    <h1
-      class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white"
-    >
-      ✨ Lilou ✨
-    </h1>
-
-    <Glitters />
-  </main>
+  <div class="h-screen">
+    <NextRouterAnnouncer />
+    <AppBody />
+    <StarshineGlitter />
+  </div>
 </template>

components/AppBody.vue

@@ -0,0 +1,26 @@
+<template>
+  <main
+    class="h-full items-center p-5 justify-center flex flex-col space-y-4 bg-[#fa86c4]"
+  >
+    <NuxtRouteAnnouncer />
+    <h1
+      class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white"
+    >
+      ✨ Lilou ✨
+    </h1>
+    <img
+      class="w-full max-w-[50vh]"
+      src="http://localhost:3000/api"
+      alt="Lilou"
+    />
+    <h1
+      class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white"
+    >
+      ✨ Lilou ✨
+    </h1>
+
+    <div class="fixed inset-0">
+      <StarshineGlitter />
+    </div>
+  </main>
+</template>