From f36bf1437cff7e0f59db49f6e7590ebb4b004ad3 Mon Sep 17 00:00:00 2001
From: sagit <36596628+Sagit-chu@users.noreply.github.com>
Date: Sun, 22 Feb 2026 13:28:47 +0800
Subject: [PATCH] fix(frontend): prevent font blurriness caused by scale
 animations (#183)

Remove scale transforms from Framer Motion animations that cause subpixel rendering issues on text elements. Replace with opacity + translateY for smooth animations without blur.

- Remove scale from FadeIn component (animated-page.tsx)
- Remove scale from login page entrance animation (index.tsx)
- Remove scale from search bar button animation (search-bar.tsx)
- Remove whileTap scale from sidebar menu buttons (admin.tsx)
- Remove scale from captcha modal animation (globals.css)
- Add .gpu-accelerated utility class for future use

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 vite-frontend/src/components/animated-page.tsx |  5 +++--
 vite-frontend/src/components/search-bar.tsx    |  4 ++--
 vite-frontend/src/layouts/admin.tsx            |  1 -
 vite-frontend/src/pages/index.tsx              |  4 ++--
 vite-frontend/src/styles/globals.css           | 12 ++++++++++--
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/vite-frontend/src/components/animated-page.tsx b/vite-frontend/src/components/animated-page.tsx
index ed59695..5a49781 100644
--- a/vite-frontend/src/components/animated-page.tsx
+++ b/vite-frontend/src/components/animated-page.tsx
@@ -100,6 +100,7 @@ export const StaggerItem = ({
 
 /**
  * Simple fade-in animation for standalone elements (chips, badges, counters, etc.)
+ * Uses opacity + translateY to avoid font blurriness caused by scale transforms.
  */
 export const FadeIn = ({
     children,
@@ -111,9 +112,9 @@ export const FadeIn = ({
     className?: string;
 }) => (
     <motion.div
-        animate={{ opacity: 1, scale: 1 }}
+        animate={{ opacity: 1, y: 0 }}
         className={className}
-        initial={{ opacity: 0, scale: 0.95 }}
+        initial={{ opacity: 0, y: 8 }}
         transition={{ duration: 0.2, delay, ease: "easeOut" }}
     >
         {children}
diff --git a/vite-frontend/src/components/search-bar.tsx b/vite-frontend/src/components/search-bar.tsx
index 6f68fff..478d855 100644
--- a/vite-frontend/src/components/search-bar.tsx
+++ b/vite-frontend/src/components/search-bar.tsx
@@ -29,8 +29,8 @@ export function SearchBar({
                     <motion.div
                         key="search-btn"
                         animate={{ opacity: 1, scale: 1 }}
-                        exit={{ opacity: 0, scale: 0.8 }}
-                        initial={{ opacity: 0, scale: 0.8 }}
+                        exit={{ opacity: 0 }}
+                        initial={{ opacity: 0 }}
                         transition={{ duration: 0.12 }}
                     >
                         <Button
diff --git a/vite-frontend/src/layouts/admin.tsx b/vite-frontend/src/layouts/admin.tsx
index 4b40a70..b28c143 100644
--- a/vite-frontend/src/layouts/admin.tsx
+++ b/vite-frontend/src/layouts/admin.tsx
@@ -346,7 +346,6 @@ export default function AdminLayout({
                       }
                      `}
                     transition={{ duration: 0.15 }}
-                    whileTap={{ scale: 0.97 }}
                     onClick={() => handleMenuClick(item.path)}
                   >
                     {isActive && (
diff --git a/vite-frontend/src/pages/index.tsx b/vite-frontend/src/pages/index.tsx
index b2a5a52..3d08df4 100644
--- a/vite-frontend/src/pages/index.tsx
+++ b/vite-frontend/src/pages/index.tsx
@@ -154,9 +154,9 @@ export default function IndexPage() {
     <DefaultLayout>
       <section className="flex flex-col items-center justify-center gap-4 py-4 sm:py-8 md:py-10 pb-20 min-h-[calc(100dvh-120px)] sm:min-h-[calc(100dvh-200px)]">
         <motion.div
-          animate={{ opacity: 1, y: 0, scale: 1 }}
+          animate={{ opacity: 1, y: 0 }}
           className="w-full max-w-md px-4 sm:px-0"
-          initial={{ opacity: 0, y: 24, scale: 0.97 }}
+          initial={{ opacity: 0, y: 24 }}
           transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
         >
           <Card className="w-full">
diff --git a/vite-frontend/src/styles/globals.css b/vite-frontend/src/styles/globals.css
index fe6d7c1..9ad9b97 100644
--- a/vite-frontend/src/styles/globals.css
+++ b/vite-frontend/src/styles/globals.css
@@ -2,6 +2,14 @@
 @import "tw-animate-css";
 @import "./tailwind-theme.pcss";
 
+/* GPU acceleration helper - prevents font blurriness during transforms */
+.gpu-accelerated {
+  will-change: transform;
+  backface-visibility: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 :root {
   --safe-area-top: env(safe-area-inset-top, 0px);
   --safe-area-bottom: env(safe-area-inset-bottom, 0px);
@@ -181,12 +189,12 @@ body {
 @keyframes captchaModalIn {
   from {
     opacity: 0;
-    transform: scale(0.9) translateY(-20px);
+    transform: translateY(-20px);
   }
 
   to {
     opacity: 1;
-    transform: scale(1) translateY(0);
+    transform: translateY(0);
   }
 }