From 16f62ebdc0b4bea37a5c777b138cc9115f7406f3 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sun, 10 May 2026 16:43:40 +0200
Subject: [PATCH] Add profile-appear animation to enhance profile-info entry
 transition

---
 web/components/profile/profile-info.tsx |  4 +++-
 web/styles/globals.css                  | 15 +++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/components/profile/profile-info.tsx b/web/components/profile/profile-info.tsx
index 671f31ff..4e0e3249 100644
--- a/web/components/profile/profile-info.tsx
+++ b/web/components/profile/profile-info.tsx
@@ -141,7 +141,9 @@ export function ProfileInfo(props: {
           >
             {user.name?.charAt(0).toUpperCase()}
           </div>
-          <div className={clsx('min-w-0 flex-1', !profile.pinned_url && 'ml-6')}>
+          <div
+            className={clsx('min-w-0 flex-1 animate-profile-appear', !profile.pinned_url && 'ml-6')}
+          >
             <ProfileHeader
               user={user}
               userActivity={userActivity}
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 3d94c972..d9ad6dd7 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -542,6 +542,21 @@ ol > li::marker {
   animation: fade-out-slow 3s ease-out forwards;
 }
 
+@keyframes profile-appear {
+  from {
+    opacity: 0;
+    transform: translateY(16px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.animate-profile-appear {
+  animation: profile-appear 0.7s ease-out;
+}
+
 .guidance {
   opacity: 0.7;
   font-size: 14px;