From 495b9dc05a36cd0a764db9a0f4425417672dd69a Mon Sep 17 00:00:00 2001
From: dttdrv <154076940+dttdrv@users.noreply.github.com>
Date: Tue, 7 Apr 2026 04:53:32 +0000
Subject: [PATCH] refactor: gpu-accelerated scroll progress bar

moved scroll progress animation to compositor thread by replacing width transition with transform: scaleX. eliminates layout thrashing on scroll.
---
 script.js  | 11 +++++++----
 styles.css |  7 +++++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/script.js b/script.js
index 2d49f98..96eadb6 100644
--- a/script.js
+++ b/script.js
@@ -580,18 +580,21 @@ const ScrollProgress = {
 
   update() {
     if (this.isModalActive) return;
+    // ⚡ bolt: hoist global property access out of high-frequency loop
     const scrollTop = window.scrollY;
     const docHeight = this.cachedDocHeight - this.cachedWindowHeight;
-    const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
-    this.bar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
+    const progress = docHeight > 0 ? (scrollTop / docHeight) : 0;
+    // ⚡ bolt: use GPU-accelerated transform instead of layout-inducing width
+    this.bar.style.transform = `scaleX(${Math.max(0, Math.min(1, progress))})`;
   },
 
   updateModal() {
     if (!this.isModalActive || !this.modalContent) return;
     const scrollTop = this.modalContent.scrollTop;
     const scrollHeight = this.modalContent.scrollHeight - this.modalContent.clientHeight;
-    const progress = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
-    this.bar.style.width = `${Math.max(0, Math.min(100, progress))}%`;
+    const progress = scrollHeight > 0 ? (scrollTop / scrollHeight) : 0;
+    // ⚡ bolt: use GPU-accelerated transform instead of layout-inducing width
+    this.bar.style.transform = `scaleX(${Math.max(0, Math.min(1, progress))})`;
   }
 };
 
diff --git a/styles.css b/styles.css
index 83da5bc..dbae4e2 100644
--- a/styles.css
+++ b/styles.css
@@ -594,9 +594,12 @@ button {
   left: 0;
   height: 2px;
   background: var(--accent);
-  width: 0%;
+  /* ⚡ bolt: use GPU-accelerated transform instead of layout-inducing width */
+  width: 100%;
+  transform-origin: left;
+  transform: scaleX(0);
   z-index: 10001;
-  transition: width 0.1s linear;
+  transition: transform 0.1s linear;
 }
 
 /* === Gallery === */