diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 1ca3000..21b9067 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -167,7 +167,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Use the NEW speed that was just set const currentSpeed = newSpeed === 'fast' ? 3.5 : 2.0; const speed = direction === 'right' ? -currentSpeed : currentSpeed; - return prev + speed; + const newX = prev + speed; + const totalWidth = category.videos.length * videoWidth; + + // TRUE INFINITE SCROLL - wrap around seamlessly + if (direction === 'right' && newX <= -totalWidth) { + // When moved one full cycle to the right, wrap back to start + return newX + totalWidth; + } else if (direction === 'left' && newX >= totalWidth) { + // When moved one full cycle to the left, wrap back to end + return newX - totalWidth; + } + + return newX; }); }, interval); } @@ -187,7 +199,19 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Faster speed for better movement const baseSpeed = 2.0; // Faster speed on hover const speed = direction === 'right' ? -baseSpeed : baseSpeed; - return prev + speed; + const newX = prev + speed; + const totalWidth = category.videos.length * videoWidth; + + // TRUE INFINITE SCROLL - wrap around seamlessly + if (direction === 'right' && newX <= -totalWidth) { + // When moved one full cycle to the right, wrap back to start + return newX + totalWidth; + } else if (direction === 'left' && newX >= totalWidth) { + // When moved one full cycle to the left, wrap back to end + return newX - totalWidth; + } + + return newX; }); }, 16); // Fixed interval - speed controlled by pixel movement only };