diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 7dd170e..fb975fb 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -170,13 +170,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // No resets - let it flow continuously with proper wrapping - // Only wrap when we've gone a full cycle past the boundary - if (newX <= -totalWidth * 1.5) { - return newX + totalWidth; - } else if (newX >= -totalWidth * 0.5) { - return newX - totalWidth; - } + // Pure continuous flow - NO RESETS AT ALL + // Let it move freely, browser will handle infinite scroll return newX; }); }, interval); @@ -200,13 +195,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // No resets - let it flow continuously with proper wrapping - // Only wrap when we've gone a full cycle past the boundary - if (newX <= -totalWidth * 1.5) { - return newX + totalWidth; - } else if (newX >= -totalWidth * 0.5) { - return newX - totalWidth; - } + // Pure continuous flow - NO RESETS AT ALL + // Let it move freely, browser will handle infinite scroll return newX; }); }, 16); // Fixed interval - speed controlled by pixel movement only @@ -343,8 +333,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { transition: isScrolling ? 'none' : 'transform 0.3s ease' }} > - {/* Triple the videos for seamless infinite flow */} - {[...category.videos, ...category.videos, ...category.videos].map((video, index) => { + {/* Many copies for true infinite scroll */} + {[...Array(10)].flatMap(() => category.videos).map((video, index) => { const actualIndex = index % category.videos.length; return (