From e5474716ec4f5cd2566a6aa2ed8d7b7a9276d6e5 Mon Sep 17 00:00:00 2001
From: Tim Kainz <tikaiz@gmx.at>
Date: Thu, 16 Apr 2026 22:56:18 +0200
Subject: [PATCH] improve auto-scrolling and add pause when hovering/clicking

---
 .../tech-stack-carousel.css                   |   2 +-
 .../tech-stack-carousel.html                  |  11 +-
 .../tech-stack-carousel.ts                    | 129 +++++++++++++++---
 3 files changed, 119 insertions(+), 23 deletions(-)

diff --git a/src/components/tech-stack-carousel/tech-stack-carousel.css b/src/components/tech-stack-carousel/tech-stack-carousel.css
index 3d80b57..958e5f4 100644
--- a/src/components/tech-stack-carousel/tech-stack-carousel.css
+++ b/src/components/tech-stack-carousel/tech-stack-carousel.css
@@ -74,7 +74,7 @@ h2 {
   overflow-x: auto;
   width: 100%;
   padding: 0.2rem;
-  scroll-snap-type: x mandatory;
+  scroll-snap-type: none;
   scrollbar-width: thin;
   scrollbar-color: rgba(88, 166, 255, 0.45) rgba(33, 38, 45, 0.65);
 }
diff --git a/src/components/tech-stack-carousel/tech-stack-carousel.html b/src/components/tech-stack-carousel/tech-stack-carousel.html
index ca2df20..aa90219 100644
--- a/src/components/tech-stack-carousel/tech-stack-carousel.html
+++ b/src/components/tech-stack-carousel/tech-stack-carousel.html
@@ -6,12 +6,13 @@
   <div
     class="stack-carousel-shell"
     data-disable-bg-pointer
-    (mouseenter)="pauseAutoScroll()"
-    (mouseleave)="resumeAutoScroll()"
-    (focusin)="pauseAutoScroll()"
+    (mouseenter)="onHoverStart()"
+    (mouseleave)="onHoverEnd()"
+    (focusin)="onHoverStart()"
     (focusout)="onCarouselFocusOut($event)"
-    (touchstart)="pauseAutoScroll()"
-    (touchend)="resumeAutoScroll()"
+    (touchstart)="onHoverStart()"
+    (touchend)="onHoverEnd()"
+    (click)="onInteractionClick()"
   >
     <button class="carousel-btn" type="button" aria-label="Previous technologies" (click)="scrollStack(-1)">
       <span aria-hidden="true">&larr;</span>
diff --git a/src/components/tech-stack-carousel/tech-stack-carousel.ts b/src/components/tech-stack-carousel/tech-stack-carousel.ts
index ef0fd06..2e6c164 100644
--- a/src/components/tech-stack-carousel/tech-stack-carousel.ts
+++ b/src/components/tech-stack-carousel/tech-stack-carousel.ts
@@ -19,9 +19,16 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
   @ViewChild('stackCarousel') private readonly stackCarousel?: ElementRef<HTMLElement>;
   private autoScrollFrameId: number | null = null;
   private startAutoScrollTimeout: ReturnType<typeof setTimeout> | null = null;
+  private delayedResumeTimeout: ReturnType<typeof setTimeout> | null = null;
+  private delayedResumeAt = 0;
   private lastAutoScrollTime = 0;
   private virtualScrollLeft = 0;
+  private currentAutoScrollSpeedPxPerSecond = 0;
+  private targetAutoScrollSpeedPxPerSecond = 0;
+  private isPausePendingStop = false;
   private readonly autoScrollSpeedPxPerSecond = 72;
+  private readonly speedRampDurationMs = 420;
+  private readonly speedStopThresholdPxPerSecond = 0.5;
   isAutoScrolling = false;
   showLeftFade = false;
   showRightFade = false;
@@ -66,6 +73,7 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
       this.startAutoScrollTimeout = null;
     }
 
+    this.clearScheduledResume();
     this.pauseAutoScroll();
     this.isAutoScrolling = false;
   }
@@ -84,43 +92,80 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
     this.updateFadeState();
   }
 
-  pauseAutoScroll(): void {
-    if (this.autoScrollFrameId === null) {
-      return;
-    }
+  onHoverStart(): void {
+    this.pauseAutoScroll();
+    this.clearScheduledResume();
+  }
 
-    cancelAnimationFrame(this.autoScrollFrameId);
-    this.autoScrollFrameId = null;
-    this.lastAutoScrollTime = 0;
+  onHoverEnd(): void {
+    this.scheduleResume(1000);
+  }
+
+  onInteractionClick(): void {
+    this.pauseAutoScroll();
+    this.scheduleResume(2000);
+  }
+
+  pauseAutoScroll(): void {
+    this.targetAutoScrollSpeedPxPerSecond = 0;
+    this.isPausePendingStop = true;
+    this.syncAutoScrollState();
+
+    if (this.autoScrollFrameId === null) {
+      this.currentAutoScrollSpeedPxPerSecond = 0;
+      this.lastAutoScrollTime = 0;
+    }
   }
 
   resumeAutoScroll(): void {
+    this.isPausePendingStop = false;
+    this.targetAutoScrollSpeedPxPerSecond = this.autoScrollSpeedPxPerSecond;
+    this.syncAutoScrollState();
+
     if (this.autoScrollFrameId !== null) {
       return;
     }
 
-    this.isAutoScrolling = true;
-
     const step = (timestamp: number) => {
       const carousel = this.stackCarousel?.nativeElement;
       if (!carousel) {
         this.autoScrollFrameId = null;
         this.lastAutoScrollTime = 0;
         this.virtualScrollLeft = 0;
+        this.currentAutoScrollSpeedPxPerSecond = 0;
+        this.targetAutoScrollSpeedPxPerSecond = 0;
+        this.isPausePendingStop = false;
         this.isAutoScrolling = false;
         return;
       }
 
       if (this.lastAutoScrollTime === 0) {
         const loopWidth = this.getLoopWidth(carousel);
-        this.virtualScrollLeft = loopWidth > 0 ? carousel.scrollLeft % loopWidth : 0;
+        this.virtualScrollLeft = loopWidth > 0 ? carousel.scrollLeft : 0;
       }
 
       const deltaMs = this.lastAutoScrollTime > 0 ? Math.min(timestamp - this.lastAutoScrollTime, 40) : 16;
       this.lastAutoScrollTime = timestamp;
 
-      this.autoAdvanceStack(carousel, deltaMs);
+      this.updateAutoScrollSpeed(deltaMs);
+
+      if (this.currentAutoScrollSpeedPxPerSecond > this.speedStopThresholdPxPerSecond) {
+        this.autoAdvanceStack(carousel, deltaMs, this.currentAutoScrollSpeedPxPerSecond);
+      }
+
       this.updateFadeState(carousel);
+      this.syncAutoScrollState();
+
+      if (this.isPausePendingStop && this.currentAutoScrollSpeedPxPerSecond <= this.speedStopThresholdPxPerSecond) {
+        this.currentAutoScrollSpeedPxPerSecond = 0;
+        this.targetAutoScrollSpeedPxPerSecond = 0;
+        this.lastAutoScrollTime = 0;
+        this.autoScrollFrameId = null;
+        this.isPausePendingStop = false;
+        this.syncAutoScrollState();
+        return;
+      }
+
       this.autoScrollFrameId = requestAnimationFrame(step);
     };
 
@@ -132,7 +177,7 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
     const shell = event.currentTarget as HTMLElement | null;
 
     if (!shell?.contains(next)) {
-      this.resumeAutoScroll();
+      this.scheduleResume(1000);
     }
   }
 
@@ -142,16 +187,60 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
     wrapper?.classList.add('is-fallback');
   }
 
-  private autoAdvanceStack(carousel: HTMLElement, deltaMs: number): void {
+  private scheduleResume(delayMs: number): void {
+    const nextResumeAt = Date.now() + delayMs;
+    if (nextResumeAt <= this.delayedResumeAt) {
+      return;
+    }
+
+    this.delayedResumeAt = nextResumeAt;
+
+    if (this.delayedResumeTimeout !== null) {
+      clearTimeout(this.delayedResumeTimeout);
+    }
+
+    this.delayedResumeTimeout = setTimeout(() => {
+      this.delayedResumeTimeout = null;
+      this.delayedResumeAt = 0;
+      this.resumeAutoScroll();
+    }, delayMs);
+  }
+
+  private clearScheduledResume(): void {
+    if (this.delayedResumeTimeout !== null) {
+      clearTimeout(this.delayedResumeTimeout);
+      this.delayedResumeTimeout = null;
+    }
+
+    this.delayedResumeAt = 0;
+  }
+
+  private updateAutoScrollSpeed(deltaMs: number): void {
+    if (deltaMs <= 0) {
+      return;
+    }
+
+    const speedDelta = this.targetAutoScrollSpeedPxPerSecond - this.currentAutoScrollSpeedPxPerSecond;
+    if (Math.abs(speedDelta) <= this.speedStopThresholdPxPerSecond) {
+      this.currentAutoScrollSpeedPxPerSecond = this.targetAutoScrollSpeedPxPerSecond;
+      return;
+    }
+
+    const maxStep = (this.autoScrollSpeedPxPerSecond * deltaMs) / this.speedRampDurationMs;
+    const appliedStep = Math.sign(speedDelta) * Math.min(Math.abs(speedDelta), maxStep);
+    this.currentAutoScrollSpeedPxPerSecond += appliedStep;
+  }
+
+  private autoAdvanceStack(carousel: HTMLElement, deltaMs: number, speedPxPerSecond: number): void {
     const loopWidth = this.getLoopWidth(carousel);
     if (loopWidth <= 0) {
       return;
     }
 
-    this.virtualScrollLeft += (this.autoScrollSpeedPxPerSecond * deltaMs) / 1000;
-    if (this.virtualScrollLeft >= loopWidth) {
-      this.virtualScrollLeft %= loopWidth;
-    }
+    const nextVirtualScrollLeft = this.virtualScrollLeft + (speedPxPerSecond * deltaMs) / 1000;
+
+    // Normalize only when moving past the duplicated track boundary to avoid abrupt remaps on quick re-entry.
+    this.virtualScrollLeft = nextVirtualScrollLeft >= loopWidth ? nextVirtualScrollLeft - loopWidth : nextVirtualScrollLeft;
 
     carousel.scrollLeft = this.virtualScrollLeft;
   }
@@ -182,5 +271,11 @@ export class TechStackCarousel implements AfterViewInit, OnDestroy {
   private getScrollStep(carousel: HTMLElement): number {
     return Math.max(carousel.clientWidth * 0.82, 260);
   }
+
+  private syncAutoScrollState(): void {
+    this.isAutoScrolling =
+      this.targetAutoScrollSpeedPxPerSecond > this.speedStopThresholdPxPerSecond ||
+      this.currentAutoScrollSpeedPxPerSecond > this.speedStopThresholdPxPerSecond;
+  }
 }