From f04f8ad5170fc4d2473e5c048aeaa0feae2de1ab Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Tue, 6 Aug 2024 21:42:46 +0200
Subject: [PATCH] Added gradient aura

---
 src/pages/index.astro | 76 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8de1805..e67e616 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,8 +5,78 @@ import Layout from '../layouts/Layout.astro';
 
 <Layout>
   <main>
-    <Heading tag="h1">
-      Titre
-    </Heading>
+    <section class="relative h-screen overflow-clip">
+      <Heading tag="h1">
+        Titre
+      </Heading>
+
+      <div class="absolute inset-0 -z-20 isolate">
+        <div id="shape-filter"></div>
+        <div id="shape" class="bg-gradient-to-tr from-emerald-500 from-35% via-indigo-500 via-70% to-fuchsia-500 to-100% opacity-30"></div>
+      </div>
+
+      <div class="absolute inset-0 -z-10 isolate grid place-items-center pointer-events-none" style="mask-image: radial-gradient(black, transparent);">
+        <svg class="col-start-1 row-start-1 opacity-15" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <pattern id="grid" width="38" height="38" patternUnits="userSpaceOnUse">
+              <path d="M 100 0 L 0 0 0 38" fill="none" stroke="white" stroke-width="1"/>
+            </pattern>
+          </defs>
+        
+          <rect width="100%" height="100%" fill="url(#grid)" />
+        </svg>
+      </div>
+    </section>
   </main>
 </Layout>
+
+<script>
+const shape = document.getElementById('shape')
+
+if (shape) {
+  document.addEventListener('pointermove', (event) => {
+    const { clientX, clientY } = event;
+
+    shape.animate({
+      left: `${clientX}px`,
+      top: `${clientY}px`
+    }, { duration: 1500, fill: "forwards" })
+  })
+}
+</script>
+
+<style lang="scss">
+@keyframes shape-spin {
+  from {
+    rotate: 0deg;
+  }
+  50% {
+    scale: 1 1.5;
+  }
+  to {
+    rotate: 360deg;
+  }
+}
+
+#shape-filter {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 2;
+  backdrop-filter: blur(12vmax);
+}
+
+#shape {
+  height: 30vmax;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -50%;
+  border-radius: 50%;
+  aspect-ratio: 1;
+}
+
+#shape {
+  animation: shape-spin 17s infinite;
+}
+</style>
\ No newline at end of file