improve hover performance

src/components/tech-stack-carousel/tech-stack-carousel.ts

@@ -30,11 +30,13 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
   private isPausePendingStop = false;
   private isTouchInteracting = false;
   private isProgrammaticScrollUpdate = false;
-  private readonly autoScrollSpeedPxPerSecond = 72;
+  private lastFadeStateUpdateTime = 0;
+  private readonly autoScrollSpeedPxPerSecond = 48;
   private readonly speedRampDurationMs = 420;
   private readonly speedStopThresholdPxPerSecond = 0.5;
   private readonly touchScrollResumeDelayMs = 1200;
   private readonly hoverPauseDelayMs = 300;
+  private readonly fadeUpdateIntervalMs = 96;
   isAutoScrolling = false;
   showLeftFade = false;
   showRightFade = false;
@@ -71,6 +73,8 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
       this.updateFadeState();
       this.resumeAutoScroll();
     }, 0);
+
+    document.addEventListener('visibilitychange', this.onVisibilityChange);
   }
 
   ngOnDestroy(): void {
@@ -82,6 +86,7 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
     this.clearScheduledResume();
     this.clearScheduledHoverPause();
     this.pauseAutoScroll();
+    document.removeEventListener('visibilitychange', this.onVisibilityChange);
     this.isAutoScrolling = false;
   }
 
@@ -168,6 +173,10 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
   }
 
   resumeAutoScroll(): void {
+    if (document.hidden) {
+      return;
+    }
+
     if (this.isTouchInteracting) {
       this.scheduleResume(this.touchScrollResumeDelayMs);
       return;
@@ -208,7 +217,11 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
         this.autoAdvanceStack(carousel, deltaMs, this.currentAutoScrollSpeedPxPerSecond);
       }
 
-      this.updateFadeState(carousel);
+      if (timestamp - this.lastFadeStateUpdateTime >= this.fadeUpdateIntervalMs) {
+        this.updateFadeState(carousel);
+        this.lastFadeStateUpdateTime = timestamp;
+      }
+
       this.syncAutoScrollState();
 
       if (this.isPausePendingStop && this.currentAutoScrollSpeedPxPerSecond <= this.speedStopThresholdPxPerSecond) {
@@ -353,7 +366,17 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
     this.currentAutoScrollSpeedPxPerSecond = 0;
     this.targetAutoScrollSpeedPxPerSecond = 0;
     this.lastAutoScrollTime = 0;
+    this.lastFadeStateUpdateTime = 0;
     this.syncAutoScrollState();
   }
+
+  private readonly onVisibilityChange = (): void => {
+    if (document.hidden) {
+      this.pauseAutoScrollImmediately();
+      return;
+    }
+
+    this.scheduleResume(320);
+  };
 }