From a9c3c6fdb466f48fcd40d76d23695caae28cec1d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 2 Nov 2023 09:36:30 +0800
Subject: [PATCH] Scroll-driven avatar shrinking

---
 src/components/account-info.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index e78ec433..544350a0 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -432,11 +432,22 @@
     filter: blur(16px) opacity(0.2);
   }
 }
+@keyframes shrink-avatar {
+  0% {
+    width: 64px;
+    height: 64px;
+  }
+  100% {
+    width: 2.5em;
+    height: 2.5em;
+  }
+}
 .sheet .account-container {
   border-radius: 16px 16px 0 0;
   overflow-x: hidden;
   max-height: 75vh;
   overscroll-behavior: none;
+  scroll-timeline: --account-scroll;
 
   header {
     padding-bottom: 16px;
@@ -469,6 +480,12 @@
       animation-timeline: view();
       animation-range: contain 100% cover 100%;
     }
+
+    header .avatar {
+      animation: shrink-avatar 1s linear both;
+      animation-timeline: --account-scroll;
+      animation-range: 0 150px;
+    }
   }
 
   main {