diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx index 68f3641..75a252f 100644 --- a/client/src/components/video-card.tsx +++ b/client/src/components/video-card.tsx @@ -226,15 +226,23 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP )} - {/* Title overlay at bottom */} -
+ {/* Cinematic title overlay */} +

onClick?.(video)} data-testid={`text-title-${video.id}`} > {video.title}

+ + {/* Subtle accent line */} +
diff --git a/client/src/index.css b/client/src/index.css index cd021d7..b6b484e 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -387,11 +387,21 @@ input[data-testid*="search"]::placeholder { opacity: 0; } -/* Maximum possible z-index for video card hover */ +/* Maximum possible z-index for video card hover with cinematic effects */ .video-card:hover { z-index: 2147483647 !important; } +/* Cinematic text animations */ +@keyframes titleGlow { + 0%, 100% { text-shadow: 2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5); } + 50% { text-shadow: 2px 2px 12px rgba(0,0,0,0.9), 0 0 25px rgba(255,215,0,0.3), 0 0 35px rgba(255,165,0,0.2); } +} + +.video-card:hover h3 { + animation: titleGlow 2s ease-in-out infinite; +} + /* Hide picture-in-picture button on all video elements */ video::-webkit-media-controls-picture-in-picture-button { display: none !important;