Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/hover-play-cardimport HoverPlayCard from "@/components/ui/hover-play-card";
export default function DemoOne() {
return <HoverPlayCard src={"https://www.pexels.com/download/video/29913691/"}/>;
}