diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 842bc61..e6c796b 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -168,14 +168,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // Infinite loop - seamless reset for continuous circular motion - if (direction === 'right' && newX <= -totalWidth) { - return newX + totalWidth; // Add one full cycle to continue seamlessly - } else if (direction === 'left' && newX >= 0) { - return newX - totalWidth; // Subtract one full cycle to continue seamlessly + // Seamless infinite carousel - no jumps, just continuous flow + let adjustedX = newX; + + // Keep position within bounds using modulo for seamless loop + while (adjustedX <= -totalWidth) { + adjustedX += totalWidth; + } + while (adjustedX > 0) { + adjustedX -= totalWidth; } - return newX; + return adjustedX; }); }, interval); } @@ -198,14 +202,18 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; - // Infinite loop - seamless reset for continuous circular motion - if (direction === 'right' && newX <= -totalWidth) { - return newX + totalWidth; // Add one full cycle to continue seamlessly - } else if (direction === 'left' && newX >= 0) { - return newX - totalWidth; // Subtract one full cycle to continue seamlessly + // Seamless infinite carousel - no jumps, just continuous flow + let adjustedX = newX; + + // Keep position within bounds using modulo for seamless loop + while (adjustedX <= -totalWidth) { + adjustedX += totalWidth; + } + while (adjustedX > 0) { + adjustedX -= totalWidth; } - return newX; + return adjustedX; }); }, speedMode === 'fast' ? 8 : 12); // Faster interval for fast mode };