fix: sort streaks by depth

src-tauri/Cargo.lock

@@ -1007,7 +1007,7 @@ dependencies = [
 
 [[package]]
 name = "ezpplauncher"
-version = "3.1.0"
+version = "3.1.1"
 dependencies = [
  "base64 0.22.1",
  "discord-rich-presence",

src/lib/components/ui/animated-bg/AnimatedBg.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Logo from '$assets/logo.png';
+
   //TODO: maybe dynamic background images fetched from ezpp?
 
   const COUNT = 60;
@@ -7,7 +9,8 @@
     return Math.random() * (max - min) + min;
   }
 
-  const streaks = Array.from({ length: COUNT }).map((_, i) => {
+  const streaks = Array.from({ length: COUNT })
+    .map((_, i) => {
       const depth = rand(0, 2);
 
       const scale = 0.6 + depth * 0.8;
@@ -17,8 +20,8 @@
       const duration = distance / speed;
 
       return {
-      width: rand(180, 320) * scale,
-      height: rand(16, 32) * scale,
+        width: rand(300, 320) * scale,
+        height: 32 * scale,
         x: (i / COUNT) * 200 - 50,
         y: ((i * 137.5) % 100) - 20,
         opacity: 0.25 + depth * 0.65,
@@ -26,7 +29,8 @@
         delay: rand(0, duration),
         scale,
       };
-  });
+    })
+    .sort((a, b) => a.scale - b.scale);
 </script>
 
 <div class="absolute bg blur-[2px]">
@@ -54,7 +58,12 @@
     position: fixed;
     inset: 0;
     overflow: hidden;
-    background: linear-gradient(180deg, var(--color-primary-300) 0%, var(--color-primary-600) 40%, var(--color-primary-900) 100%);
+    background: linear-gradient(
+      180deg,
+      var(--color-primary-300) 0%,
+      var(--color-primary-600) 40%,
+      var(--color-primary-900) 100%
+    );
   }
 
   .streak {