diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 6bd474e..64ddb75 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -160,13 +160,11 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Start new interval with updated speed immediately const baseSpeed = newSpeed === 'fast' ? 2.5 : 0.8; - const interval = newSpeed === 'fast' ? 8 : 12; + const interval = newSpeed === 'fast' ? 10 : 16; scrollIntervalRef.current = setInterval(() => { setTranslateX(prev => { - const videosPerStep = 4; // Move 4 videos at once - const adjustedSpeed = speedMode === 'fast' ? videosPerStep * videoWidth * 0.03 : videosPerStep * videoWidth * 0.01; - const speed = direction === 'right' ? -adjustedSpeed : adjustedSpeed; + const speed = direction === 'right' ? -baseSpeed : baseSpeed; const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; @@ -198,9 +196,8 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { // Start continuous smooth scrolling with variable speed scrollIntervalRef.current = setInterval(() => { setTranslateX(prev => { - // Speed changes based on mode: move by full videos (4 videos at once) - const videosPerStep = 4; // Move 4 videos at once - const baseSpeed = speedMode === 'fast' ? videosPerStep * videoWidth * 0.03 : videosPerStep * videoWidth * 0.01; + // Speed changes based on mode: normal (0.5px) or fast (1.2px) - smooth video by video + const baseSpeed = speedMode === 'fast' ? 1.2 : 0.5; const speed = direction === 'right' ? -baseSpeed : baseSpeed; const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; @@ -218,7 +215,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { return adjustedX; }); - }, speedMode === 'fast' ? 8 : 12); // Faster interval for fast mode + }, speedMode === 'fast' ? 10 : 16); // Slower intervals for smoother animation }; // Initialize with first video on the left side