diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx index 5745b58..2a61c20 100644 --- a/client/src/components/netflix-grid.tsx +++ b/client/src/components/netflix-grid.tsx @@ -139,10 +139,14 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { const [translateX, setTranslateX] = useState(0); const [isScrolling, setIsScrolling] = useState(false); + const [speedMode, setSpeedMode] = useState<'normal' | 'fast'>('normal'); const videosToShow = 5; // Show 5 videos at a time const videoWidth = 120; // Width including spacing const scroll = (direction: 'left' | 'right') => { + // Toggle speed mode on click + setSpeedMode(prev => prev === 'normal' ? 'fast' : 'normal'); + const step = direction === 'right' ? -videoWidth : videoWidth; setTranslateX(prev => prev + step); }; @@ -155,10 +159,12 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { setIsScrolling(true); - // Start continuous smooth scrolling with interval + // Start continuous smooth scrolling with variable speed scrollIntervalRef.current = setInterval(() => { setTranslateX(prev => { - const speed = direction === 'right' ? -0.8 : 0.8; // Even smaller steps for ultra smooth motion + // Speed changes based on mode: normal (0.8px) or fast (2.5px) + const baseSpeed = speedMode === 'fast' ? 2.5 : 0.8; + const speed = direction === 'right' ? -baseSpeed : baseSpeed; const newX = prev + speed; const totalWidth = category.videos.length * videoWidth; @@ -171,7 +177,7 @@ function CategoryRow({ category, onVideoClick }: CategoryRowProps) { return newX; }); - }, 12); // Update every 12ms for buttery smooth flow + }, speedMode === 'fast' ? 8 : 12); // Faster interval for fast mode }; // Initialize with first video on the left side