doc morphBlur effect added to main page

docs/.vitepress/config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vitepress'
 export default defineConfig({
   title: 'Vue Mess Detector',
   description: 'A static code analysis tool for detecting code smells and best practice violations in **Vue** and **Nuxt** projects.',
-  head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+  head: [['link', { rel: 'icon', href: '/favicon.ico' }], ['link', { rel: 'stylesheet', href: '/styles.css' }]],
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     search: {

docs/index.md

@@ -29,5 +29,7 @@ features:
     details: 20+ rules supported
 ---
 
+<span id="morphBlur"></span>
+
 <Contributors />
 

docs/styles.css

@@ -0,0 +1,70 @@
+   #morphBlur {
+     display: inline-block;
+     background-color: #8a25b1;
+     height: 12em;
+     aspect-ratio: 1;
+     position: fixed;
+     top: 3em;
+     left: 10%;
+     z-index: -1;
+     animation: move 12s ease-in-out infinite alternate;
+     filter: blur(6em);
+   }
+
+   @keyframes move {
+     50% {
+       top: 12em;
+       left: 60%;
+     }
+
+     100% {
+       top: 20em;
+       left: 25%;
+     }
+   }
+
+   #morphBlur::before,
+   #morphBlur::after {
+     content: '';
+     display: block;
+     position: absolute;
+     height: 100%;
+     width: 100%;
+     background-color: inherit;
+   }
+
+   #morphBlur::before {
+     top: -12em;
+     right: 9em;
+     animation: moveBefore 5s ease-in-out forwards infinite alternate;
+   }
+
+   @keyframes moveBefore {
+     35% {
+       top: 12em;
+       right: 12em;
+     }
+
+     100% {
+       top: 3em;
+       right: 3em;
+     }
+   }
+
+   #morphBlur::after {
+     bottom: -4em;
+     left: 19em;
+     animation: moveAfter 8s ease-in-out forwards infinite alternate;
+   }
+
+   @keyframes moveAfter {
+     30% {
+       bottom: 12em;
+       left: 0em;
+     }
+
+     100% {
+       bottom: 0em;
+       left: 22em;
+     }
+   }