From 685bcfb86c6d057ee58a4dff5217341b8f4031fa Mon Sep 17 00:00:00 2001
From: matt <matt@harborsmith.co>
Date: Fri, 19 Sep 2025 11:37:18 +0200
Subject: [PATCH] Fix jarring scroll with linear constant-speed motion

- Replace easeInOutSine with linear easing (return t)
- Reduce duration from 1200ms to 800ms for snappier feel
- Update all component references to use new duration

Linear easing provides constant-speed scrolling without any
acceleration or deceleration, eliminating the jarring effect.
---
 apps/website/components/AppNavbar.vue       |  4 ++--
 apps/website/components/HeroSection.vue     |  6 +++---
 apps/website/composables/useSmoothScroll.ts | 14 +++++++-------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/website/components/AppNavbar.vue b/apps/website/components/AppNavbar.vue
index e064bc4..c07733e 100644
--- a/apps/website/components/AppNavbar.vue
+++ b/apps/website/components/AppNavbar.vue
@@ -65,11 +65,11 @@ const handleSmoothScroll = (event: Event, href: string) => {
   }
 
   event.preventDefault()
-  scrollToElement(href, 1200) // Smooth scrolling with sine easing
+  scrollToElement(href, 800) // Constant-speed smooth scrolling
 }
 
 const scrollToTop = () => {
-  smoothScrollToTop(1200) // Smooth scrolling with sine easing
+  smoothScrollToTop(800) // Constant-speed smooth scrolling
 }
 
 onMounted(() => {
diff --git a/apps/website/components/HeroSection.vue b/apps/website/components/HeroSection.vue
index d64082e..c4134e0 100644
--- a/apps/website/components/HeroSection.vue
+++ b/apps/website/components/HeroSection.vue
@@ -101,11 +101,11 @@ const handlePhoneClick = () => {
 }
 
 const handleServicesClick = () => {
-  scrollToElement('#services', 1200) // Smooth scrolling with sine easing
+  scrollToElement('#services', 800) // Constant-speed smooth scrolling
 }
 
 const handleScrollToExplore = () => {
-  scrollToElement('#services', 1200) // Smooth scroll to services section
+  scrollToElement('#services', 800) // Constant-speed scroll to services
 }
 
 const handleVideoVisibility = () => {
@@ -136,7 +136,7 @@ const initSmoothScroll = () => {
       if (!href) {
         return
       }
-      scrollToElement(href, 1200) // Smooth scrolling with sine easing
+      scrollToElement(href, 800) // Constant-speed smooth scrolling
     })
   })
 }
diff --git a/apps/website/composables/useSmoothScroll.ts b/apps/website/composables/useSmoothScroll.ts
index 09139dc..f7ebb86 100644
--- a/apps/website/composables/useSmoothScroll.ts
+++ b/apps/website/composables/useSmoothScroll.ts
@@ -13,12 +13,12 @@ export const useSmoothScroll = () => {
     window.removeEventListener('keydown', cancelScroll)
   }
 
-  // Smooth sine-based easing function for natural motion
-  const easeInOutSine = (t: number): number => {
-    return -(Math.cos(Math.PI * t) - 1) / 2
+  // Linear easing for constant-speed scrolling
+  const easeLinear = (t: number): number => {
+    return t
   }
 
-  const smoothScrollTo = (target: number | Element, duration: number = 1200) => {
+  const smoothScrollTo = (target: number | Element, duration: number = 800) => {
     // Check for reduced motion preference
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
@@ -43,7 +43,7 @@ export const useSmoothScroll = () => {
       if (startTime === null) startTime = currentTime
       const timeElapsed = currentTime - startTime
       const progress = Math.min(timeElapsed / duration, 1)
-      const easedProgress = easeInOutSine(progress)
+      const easedProgress = easeLinear(progress)
 
       window.scrollTo(0, startPosition + distance * easedProgress)
 
@@ -62,14 +62,14 @@ export const useSmoothScroll = () => {
     animationFrameId = requestAnimationFrame(animation)
   }
 
-  const scrollToElement = (selector: string, duration: number = 1200) => {
+  const scrollToElement = (selector: string, duration: number = 800) => {
     const element = document.querySelector(selector)
     if (element) {
       smoothScrollTo(element, duration)
     }
   }
 
-  const scrollToTop = (duration: number = 1200) => {
+  const scrollToTop = (duration: number = 800) => {
     smoothScrollTo(0, duration)
   }