From 9d73ffc20e5b9e29cba9b6d2cfc98ea0f8f8e044 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 20:13:44 +0000
Subject: [PATCH] Enhance video titles with more cinematic and attractive
 visual effects

Improve video card component styling to include animated text glow, scale effects, and gradient overlays for a more cinematic presentation. Update CSS with new keyframes and hover effects.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/kdQ95gE
---
 client/src/components/video-card.tsx | 14 +++++++++++---
 client/src/index.css                 | 12 +++++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

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
           </div>
         )}
         
-        {/* Title overlay at bottom */}
-        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3">
+        {/* Cinematic title overlay */}
+        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent p-4 transition-all duration-500 group-hover:from-black/100 group-hover:via-black/80">
           <h3 
-            className="text-white text-sm md:text-base font-semibold line-clamp-2 hover:text-bunny-blue transition-colors duration-300 cursor-pointer"
+            className="text-white text-sm md:text-lg font-bold tracking-wide leading-tight line-clamp-2 hover:text-yellow-400 transition-all duration-500 cursor-pointer transform group-hover:scale-105 drop-shadow-2xl"
+            style={{
+              fontFamily: 'system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif',
+              textShadow: '2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5)',
+              letterSpacing: '0.025em'
+            }}
             onClick={() => onClick?.(video)}
             data-testid={`text-title-${video.id}`}
           >
             {video.title}
           </h3>
+          
+          {/* Subtle accent line */}
+          <div className="w-0 h-0.5 bg-gradient-to-r from-yellow-400 to-orange-500 transition-all duration-700 group-hover:w-full mt-2 opacity-0 group-hover:opacity-100"></div>
         </div>
         
       </div>
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;