chore(docs): enable animated background on intro node click

docs/components/home/flows/Intro.vue

@@ -9,6 +9,7 @@ import Heart from '~icons/mdi/heart'
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const dark = ref(false)
+const animatedBackground = ref(false)
 
 onMounted(() => {
   const html = document.getElementsByTagName('html')![0]
@@ -84,6 +85,8 @@ onNodeClick(async ({ node }) => {
   if (node.id === 'intro') {
     if (disabled.value) return
 
+    animatedBackground.value = !animatedBackground.value
+
     if (clickInterval.value) {
       clearInterval(clickInterval.value)
     }
@@ -243,7 +246,8 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
 
 <template>
   <VueFlow ref="el" class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
-    <Background>
+    <XyzTransition xyz="fade down ease-out-back duration-10">
+      <Background v-if="animatedBackground">
         <template #pattern-container="{ id }">
           <pattern :id="id" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
             <rect
@@ -281,6 +285,16 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
           </pattern>
         </template>
       </Background>
+    </XyzTransition>
+    <XyzTransition xyz="fade down ease-out-back duration-20">
+      <Background
+        v-if="!animatedBackground"
+        variant="lines"
+        :pattern-color="dark ? '#ffffff' : '#000000'"
+        :size="0.7"
+        :gap="100"
+      />
+    </XyzTransition>
 
     <template #node-box="props">
       <template v-if="props.id === 'intro'">
@@ -339,9 +353,12 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
 
 @keyframes fill-green-blue {
   0% {
+    @apply fill-transparent;
+  }
+  35% {
     @apply fill-green-500/50;
   }
-  50% {
+  65% {
     @apply fill-transparent;
   }
   100% {
@@ -351,9 +368,12 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
 
 @keyframes fill-orange-purple {
   0% {
+    @apply fill-transparent;
+  }
+  35% {
     @apply fill-orange-500/50;
   }
-  50% {
+  65% {
     @apply fill-transparent;
   }
   100% {
@@ -363,9 +383,12 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
 
 @keyframes fill-yellow-green {
   0% {
+    @apply fill-transparent;
+  }
+  35% {
     @apply fill-yellow-500/50;
   }
-  50% {
+  65% {
     @apply fill-transparent;
   }
   100% {
@@ -375,9 +398,12 @@ const animations = ref<{ className: string; duration: number }[]>(shuffle(create
 
 @keyframes fill-sky-red {
   0% {
+    @apply fill-transparent;
+  }
+  35% {
     @apply fill-sky-500/50;
   }
-  50% {
+  65% {
     @apply fill-transparent;
   }
   100% {