diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 24e7999..9f623a4 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -150,12 +150,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + step; const singleSetWidth = category.videos.length * 220; // One complete set - // Seamless infinite scroll - when in middle copy, wrap smoothly + // Seamless infinite scroll with smooth wrapping if (direction === 'right' && newX <= -singleSetWidth * 2) { - // When moved past second copy, jump back to first copy position + // When moved past second copy, wrap to start of first copy return newX + singleSetWidth; - } else if (direction === 'left' && newX >= 0) { - // When moved past first copy, jump back to second copy position + } else if (direction === 'left' && newX >= singleSetWidth) { + // When moved past first copy left boundary, wrap to second copy return newX - singleSetWidth; } @@ -233,9 +233,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Initialize with first video on the left side useEffect(() => { if (category.videos.length > 0) { - // Start in middle copy for seamless wrapping - const singleSetWidth = category.videos.length * 220; - setTranslateX(-singleSetWidth); + // Start at the beginning of first copy (0 position) + setTranslateX(0); } }, [category.videos.length]);