From bfafe884151ee2259ddde22c958f588cfd436885 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 15:49:27 +0000
Subject: [PATCH] Improve hover effect for video scrubbing with visual cues

Update video card component to refine the mouse-scrubbing animation and delay timers.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/4DOsXkx
---
 client/src/components/video-card.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index b9569cc..a61b8df 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -90,7 +90,7 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
       if (window.innerWidth >= 768) {
         hintTimeoutRef.current = setTimeout(() => {
           setShowHint(true);
-        }, 300);
+        }, 200);
         
         const delay = 800;
         hoverTimeoutRef.current = setTimeout(() => {
@@ -293,17 +293,16 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
             </div>
             
             {/* Mouse scrub animation */}
-            <div className="flex items-center gap-3 text-white/80 text-xs">
+            <div className="flex items-center justify-center">
               <div className="relative">
-                <Mouse className="w-4 h-4 animate-bounce" />
+                <Mouse className="w-5 h-5 animate-bounce" />
                 {/* Left-right movement indicator */}
-                <div className="absolute -bottom-2 -left-1 w-6 h-0.5 bg-gradient-to-r from-transparent via-white/60 to-transparent rounded-full">
-                  <div className="absolute top-0 left-0 w-2 h-0.5 bg-white rounded-full animate-ping" style={{
-                    animation: 'ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite, slideLeftRight 2s ease-in-out infinite'
+                <div className="absolute -bottom-2 -left-1 w-7 h-0.5 bg-gradient-to-r from-transparent via-white/60 to-transparent rounded-full">
+                  <div className="absolute top-0 left-0 w-2 h-0.5 bg-white rounded-full" style={{
+                    animation: 'slideLeftRight 3.5s ease-in-out infinite'
                   }}></div>
                 </div>
               </div>
-              <span className="animate-pulse">Move to scrub</span>
             </div>
           </div>
         )}