From e0875d514df72284b78e342ad3e759b4ed16ff3a Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:49:16 +0000
Subject: [PATCH] Improve carousel scrolling for a smoother, seamless user
 experience

Refactor the infinite carousel logic in `netflix-grid.tsx` to use modulo arithmetic for seamless looping and prevent jumps.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/QCN70f2
---
 client/src/components/netflix-grid.tsx | 32 ++++++++++++++++----------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 842bc61..e6c796b 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -168,14 +168,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
           const newX = prev + speed;
           const totalWidth = category.videos.length * videoWidth;
           
-          // Infinite loop - seamless reset for continuous circular motion
-          if (direction === 'right' && newX <= -totalWidth) {
-            return newX + totalWidth; // Add one full cycle to continue seamlessly
-          } else if (direction === 'left' && newX >= 0) {
-            return newX - totalWidth; // Subtract one full cycle to continue seamlessly
+          // Seamless infinite carousel - no jumps, just continuous flow
+          let adjustedX = newX;
+          
+          // Keep position within bounds using modulo for seamless loop
+          while (adjustedX <= -totalWidth) {
+            adjustedX += totalWidth;
+          }
+          while (adjustedX > 0) {
+            adjustedX -= totalWidth;
           }
           
-          return newX;
+          return adjustedX;
         });
       }, interval);
     }
@@ -198,14 +202,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
         const newX = prev + speed;
         const totalWidth = category.videos.length * videoWidth;
         
-        // Infinite loop - seamless reset for continuous circular motion
-        if (direction === 'right' && newX <= -totalWidth) {
-          return newX + totalWidth; // Add one full cycle to continue seamlessly
-        } else if (direction === 'left' && newX >= 0) {
-          return newX - totalWidth; // Subtract one full cycle to continue seamlessly
+        // Seamless infinite carousel - no jumps, just continuous flow
+        let adjustedX = newX;
+        
+        // Keep position within bounds using modulo for seamless loop
+        while (adjustedX <= -totalWidth) {
+          adjustedX += totalWidth;
+        }
+        while (adjustedX > 0) {
+          adjustedX -= totalWidth;
         }
         
-        return newX;
+        return adjustedX;
       });
     }, speedMode === 'fast' ? 8 : 12); // Faster interval for fast mode
   };