Refactor: streamline components and update styles for improved performance and maintainability

app/components/AppBackground.vue

@@ -1,37 +1,32 @@
-<script lang="ts" setup>
-import type { NavColor } from '~~/types'
-import { navColors } from '~~/types'
-
-const route = useRoute()
-const colorMode = useColorMode()
-
-const colors = computed((): NavColor[] => {
-  const navColor = navColors.find(nav => route.name === nav.name)
-  if (navColor?.colors)
-    return navColor.colors
-
-  const fallbackColor = colorMode.value === 'dark' ? '#000000' : '#ffffff'
-  const fallbackGradient = { color: fallbackColor, x: 0, y: 0, radius: 0 }
-  return [fallbackGradient, fallbackGradient]
-})
-
-const backgroundStyle = computed(() => {
-  const gradients = colors.value
-    .map(({ color, radius, x, y }) =>
-      `radial-gradient(circle ${radius}px at ${x}% ${y}%, ${color}4D, transparent)`,
-    )
-    .join(', ')
-
-  return {
-    backgroundImage: gradients,
-    backgroundSize: Array.from({ length: colors.value.length }).fill('100% 100%').join(', '),
-  }
-})
-</script>
-
 <template>
-  <div
-    class="fixed inset-0 z-0 hidden md:block blur-xl"
-    :style="backgroundStyle"
-  />
+  <div class="pointer-events-none fixed inset-0 z-40 size-full overflow-hidden">
+    <div class="noise pointer-events-none absolute inset-[-200%] z-50 size-[400%] bg-[url('/noise.png')] opacity-[4%]" />
+  </div>
 </template>
+
+<style scoped>
+.noise {
+    animation: noise 2s steps(10) infinite;
+}
+
+@keyframes noise {
+    0%, 20%, 40%, 60%, 80%, 100% {
+        transform: translate(0, 0);
+    }
+    10% {
+        transform: translate(-5%, -10%);
+    }
+    30% {
+        transform: translate(5%, 10%);
+    }
+    50% {
+        transform: translate(-15%, 5%);
+    }
+    70% {
+        transform: translate(10%, -5%);
+    }
+    90% {
+        transform: translate(5%, -10%);
+    }
+}
+</style>