HoverPlayCard

This HoverPlay Video Card component is a clean and interactive media element built with Shadcn UI. It enhances the video viewing experience by blending hover and click interactions into one intuitive design. When a user hovers over the card, the video automatically starts playing in a muted state, giving a quick preview without disrupting the browsing flow. On mouse leave, the video pauses, maintaining focus on the card. A subtle play/pause button overlay ensures users can take control — clicking the button will start or stop playback regardless of hover, and once clicked, the video continues with sound enabled. The design adapts seamlessly to both light and dark themes.