feat(gallery): intro animation

app/pages/gallery.vue

@@ -94,7 +94,9 @@ onUnmounted(() => {
 
       <div
         v-else
-        class="relative overflow-hidden rounded-sm cursor-pointer"
+        class="relative overflow-hidden rounded-sm cursor-pointer gallery-item opacity-0"
+        :class="{ 'gallery-item-down': (index % lanes) % 2 === 1 }"
+        :style="{ animationDelay: `${(index % lanes) * 300}ms` }"
         @click="openModal(index)"
       >
         <img
@@ -106,3 +108,45 @@ onUnmounted(() => {
     </template>
   </UScrollArea>
 </template>
+
+<style scoped>
+@keyframes fadeInFocusUp {
+  0% {
+    opacity: 0;
+    transform: translateY(100vh);
+    filter: blur(6px) brightness(0.7);
+  }
+  60% {
+    filter: blur(0px) brightness(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0px) brightness(0.8);
+  }
+}
+
+@keyframes fadeInFocusDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-100vh);
+    filter: blur(6px) brightness(0.7);
+  }
+  60% {
+    filter: blur(0px) brightness(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0px) brightness(0.8);
+  }
+}
+
+.gallery-item {
+  animation: fadeInFocusUp 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.gallery-item-down {
+  animation: fadeInFocusDown 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+</style>