From d5fe045b361a3735509bfa2549efa0bd185bc7de Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Thu, 16 Apr 2026 17:02:53 -0700
Subject: fix: performance issues for styled-componnt CSS animations

---
 src/app/game/page.styles.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

(limited to 'src/app/game/page.styles.ts')

diff --git a/src/app/game/page.styles.ts b/src/app/game/page.styles.ts
index 1ced4cc..e8a2678 100644
--- a/src/app/game/page.styles.ts
+++ b/src/app/game/page.styles.ts
@@ -186,11 +186,14 @@ export const LineTimingBar = styled.div`
   overflow: hidden;
 `;
 
-export const LineTimingFill = styled.div<{ $pct: number }>`
+export const LineTimingFill = styled.div.attrs<{ $pct: number }>((props) => ({
+  style: {
+    width: `${props.$pct}%`,
+  },
+}))<{ $pct: number }>`
   height: 100%;
   border-radius: 2px;
   background: #7c3aed;
-  width: ${({ $pct }) => $pct}%;
   transition: width 0.1s linear;
 `;
 
@@ -313,11 +316,14 @@ export const ProgressWrap = styled.div`
   cursor: pointer;
 `;
 
-export const ProgressFill = styled.div<{ $pct: number }>`
+export const ProgressFill = styled.div.attrs<{ $pct: number }>((props) => ({
+  style: {
+    width: `${props.$pct}%`,
+  },
+}))<{ $pct: number }>`
   height: 100%;
   background: #7c3aed;
   border-radius: 3px;
-  width: ${({ $pct }) => $pct}%;
   transition: width 0.3s linear;
 `;
 
-- 
cgit v1.2.3