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]);