From 0c00bfe23aeb1045a96a9b0c099b69dd3d24be2e Mon Sep 17 00:00:00 2001
From: muken <jmendoza14@pm.me>
Date: Mon, 29 Jun 2026 20:39:59 -0500
Subject: [PATCH] feat: calendar strip smooth pause and fade edges

---
 src/components/CalendarStrip.tsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/CalendarStrip.tsx b/src/components/CalendarStrip.tsx
index ce37609..4464303 100644
--- a/src/components/CalendarStrip.tsx
+++ b/src/components/CalendarStrip.tsx
@@ -133,17 +133,45 @@ export default function CalendarStrip() {
         overflow: 'hidden',
         borderTop: `1px solid rgba(232,168,73,0.25)`,
         borderBottom: `1px solid rgba(232,168,73,0.25)`,
+        position: 'relative',
       }}
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
     >
+      {/* Left fade mask */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: '80px',
+          background: `linear-gradient(to right, ${navy} 0%, transparent 100%)`,
+          pointerEvents: 'none',
+          zIndex: 10,
+        }}
+      />
+      {/* Right fade mask */}
+      <div
+        style={{
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          bottom: 0,
+          width: '80px',
+          background: `linear-gradient(to left, ${navy} 0%, transparent 100%)`,
+          pointerEvents: 'none',
+          zIndex: 10,
+        }}
+      />
       <div
         style={{
           display: 'flex',
           gap: '1rem',
           padding: '0 1rem',
           width: 'max-content',
-          animation: paused ? 'none' : 'marquee 38s linear infinite',
+          animation: 'marquee 60s linear infinite',
+          animationPlayState: paused ? 'paused' : 'running',
         }}
         ref={trackRef}
       >