From 7a817cbe8c1ecae194c3067d50999d01987aceeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 1 Feb 2026 12:42:52 -0600
Subject: [PATCH] feat: smooth curtains

---
 .../src/components/Scroller/index.module.css  |  7 +----
 .../src/components/Scroller/index.tsx         | 26 +++++++++++++++----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/website-ue/src/components/Scroller/index.module.css b/packages/website-ue/src/components/Scroller/index.module.css
index 2fbd01ea9..404dff5bb 100644
--- a/packages/website-ue/src/components/Scroller/index.module.css
+++ b/packages/website-ue/src/components/Scroller/index.module.css
@@ -63,8 +63,7 @@
     top: 0;
 
     opacity: 0;
-
-    transition: opacity var(--duration-brief);
+    pointer-events: none;
 
     &[data-side="left"] {
       left: 0;
@@ -75,9 +74,5 @@
       right: 0;
       background: linear-gradient(90deg, transparent, var(--gray-1));
     }
-
-    &[data-visible="true"] {
-      opacity: 1;
-    }
   }
 }
diff --git a/packages/website-ue/src/components/Scroller/index.tsx b/packages/website-ue/src/components/Scroller/index.tsx
index d457ac739..58fce4aef 100644
--- a/packages/website-ue/src/components/Scroller/index.tsx
+++ b/packages/website-ue/src/components/Scroller/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, type ComponentProps } from "react";
+import { clamp } from "three/src/math/MathUtils.js";
 import { classNames } from "../../core/ui/classNames";
 import styles from "./index.module.css";
 
@@ -36,13 +37,28 @@ export function Scroller({ children, className, ...props }: ScrollerProps) {
     }
 
     function syncCurtains() {
-      const el = content.current;
+      const maxScroll =
+        content.current.scrollWidth - content.current.clientWidth;
+      if (maxScroll <= 0) {
+        curtainLeft.current.style.opacity = "0";
+        curtainRight.current.style.opacity = "0";
+        return;
+      }
 
-      const showLeft = el.scrollLeft > 0;
-      const showRight = el.scrollLeft + el.clientWidth < el.scrollWidth;
+      const fadeDistance = Math.min(60, content.current.clientWidth * 0.15);
+      const leftOpacity = clamp(
+        content.current.scrollLeft / fadeDistance,
+        0,
+        1,
+      );
+      const rightOpacity = clamp(
+        (maxScroll - content.current.scrollLeft) / fadeDistance,
+        0,
+        1,
+      );
 
-      curtainLeft.current.dataset.visible = showLeft ? "true" : "false";
-      curtainRight.current.dataset.visible = showRight ? "true" : "false";
+      curtainLeft.current.style.opacity = `${leftOpacity}`;
+      curtainRight.current.style.opacity = `${rightOpacity}`;
     }
 
     let lastX = 0;