From e2c7102ce30397b8ad7688abcbb9704a95641129 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Thu, 1 Jan 2026 19:42:00 +0100
Subject: [PATCH] feat(gallery): intro animation

---
 app/pages/gallery.vue | 46 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/app/pages/gallery.vue b/app/pages/gallery.vue
index c1cb3d4..1e80450 100644
--- a/app/pages/gallery.vue
+++ b/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>