Add background style

src/components/Background.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const points = useState(() => Array.from({ length: 20 }).fill(0).map(() => [Math.random(), Math.random()]))
+
+const poly = computed(() => points.value.map(([x, y]) => `${x * 100}% ${y * 100}%`).join(', '))
+
+function jumpVal(val: number) {
+  return Math.random() > 0.5 ? val + (Math.random() - 0.5) / 2 : Math.random()
+}
+
+let timeout: any
+function jumpPoints() {
+  for (let i = 0; i < points.value.length; i++)
+    points.value[i] = [jumpVal(points.value[i][0]), jumpVal(points.value[i][1])]
+
+  timeout = setTimeout(jumpPoints, 2000 + Math.random() * 1000)
+}
+
+onMounted(() => {
+  jumpPoints()
+  onUnmounted(() => clearTimeout(timeout))
+})
+</script>
+
+<template>
+  <div class="flex w-full max-w-7xl">
+    <div class="bg fixed inset-0 z-30 transform-gpu blur-3xl overflow-hidden" aria-hidden="true">
+      <div
+        class="aspect-[1.7] h-full w-full bg-gradient-to-r from-[rgb(var(--color-primary-DEFAULT))] to-white/10 lg:opacity-30 xs:opacity-50"
+        :style="{ 'clip-path': `polygon(${poly})` }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bg > div {
+  clip-path: circle(75%);
+  transition: clip-path 3s;
+}
+
+.light .bg > div {
+  opacity: 1 !important;
+}
+</style>

src/layouts/default.vue

@@ -19,10 +19,11 @@ onMounted(() => configureGraphs({ darkMode: colorMode.value === 'dark' }))
 <template>
   <div>
     <SpeedInsights />
+    <Background />
     <NuxtLoadingIndicator :color="getColor" />
     <section class="fixed inset-0 flex justify-center sm:px-8">
       <div class="flex w-full max-w-7xl">
-        <div class="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
+        <div class="w-full z-20 bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
       </div>
     </section>
     <main class="relative z-50 min-h-[100svh]">