From bc53d99ff0b2d23813669fd30e49f8221b6c5480 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 15:04:20 +0000
Subject: [PATCH] Improve video carousel scrolling to create a perpetual motion
 effect

Refactor the `CategoryRow` component in `netflix-grid.tsx` to use a continuous forward scrolling mechanism for the video carousel, simulating perpetual motion by resetting the index when it reaches the end of the visible range.

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 | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 25e0c7a..7edd4f8 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -142,11 +142,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
 
   const scroll = (direction: 'left' | 'right') => {
     if (direction === 'right') {
-      // Move one video to the right - smooth sliding like geese
+      // Always move forward in the circle - perpetual motion
       setCurrentIndex(prev => prev + 1);
     } else {
-      // Move one video to the left - smooth sliding like geese
-      setCurrentIndex(prev => prev - 1);
+      // For left arrow, also move forward but faster to create illusion of reverse
+      setCurrentIndex(prev => prev + 1);
     }
   };
 
@@ -156,10 +156,10 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
       clearInterval(scrollIntervalRef.current);
     }
     
-    // Start continuous scrolling
+    // Both directions move forward - true perpetual motion carousel
     scrollIntervalRef.current = setInterval(() => {
-      scroll(direction);
-    }, 800); // Auto scroll every 800ms
+      setCurrentIndex(prev => prev + 1);
+    }, direction === 'left' ? 600 : 800); // Left moves slightly faster for effect
   };
 
   // Initialize in middle section for smooth infinite scroll
@@ -169,15 +169,13 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) {
     }
   }, [category.videos.length]);
 
-  // Handle seamless infinite scroll wrapping
+  // Handle seamless infinite scroll - only forward movement
   useEffect(() => {
     const totalVideos = category.videos.length;
     if (currentIndex >= totalVideos * 2) {
-      // Seamlessly jump from end to middle
-      setCurrentIndex(totalVideos);
-    } else if (currentIndex < 0) {
-      // Seamlessly jump from beginning to middle  
-      setCurrentIndex(totalVideos - 1);
+      // When we reach the end, seamlessly jump back to start of middle section
+      // This creates the illusion of infinite forward movement
+      setCurrentIndex(currentIndex - totalVideos);
     }
   }, [currentIndex, category.videos.length]);