From 99670c7db08223e87aa2edf2a7ca90b6d405d651 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Fri, 21 Jun 2024 12:00:20 +0200
Subject: [PATCH] Add background

---
 app/app.vue                      |  3 ++-
 app/components/AppBackground.vue | 46 ++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 app/components/AppBackground.vue

diff --git a/app/app.vue b/app/app.vue
index 2c96b42..e046178 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -7,7 +7,8 @@ useSeoMeta({
 
 <template>
   <NuxtLoadingIndicator color="#14b8a6" />
-  <UContainer>
+  <AppBackground />
+  <UContainer class="z-50 relative">
     <AppHeader />
     <NuxtPage />
     <AppFooter />
diff --git a/app/components/AppBackground.vue b/app/components/AppBackground.vue
new file mode 100644
index 0000000..67d4c13
--- /dev/null
+++ b/app/components/AppBackground.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+const points = useState(() => Array.from({ length: 45 }).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: NodeJS.Timeout
+
+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, Math.random() * 1000)
+}
+
+onMounted(() => jumpPoints())
+onUnmounted(() => clearTimeout(timeout))
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      aria-hidden="true"
+      class="bg sm:mx-8 absolute inset-0 z-20 transform-gpu blur-3xl overflow-hidden"
+    >
+      <div
+        :style="{ 'clip-path': `polygon(${poly})` }"
+        class="aspect-[2] h-2/3 w-full bg-gradient-to-r from-neutral-400 dark:from-neutral-600 to-white/10 lg:opacity-30 xs:opacity-50"
+      />
+    </div>
+  </ClientOnly>
+</template>
+
+<style scoped>
+.bg > div {
+  clip-path: circle(75%);
+  transition: clip-path 3s;
+}
+
+.light .bg > div {
+  opacity: 1 !important;
+}
+</style>