Video Hover Card turns any project thumbnail into a living preview. On hover, a static cover image crossfades into video — no autoplay clutter, no page reload, just work in motion the moment someone pays attention.
1. Three video sources, one component. Upload a file, or paste a Vimeo/YouTube URL — the ID is auto-extracted into a clean, chrome-free embed. Switch sources anytime from one property.
2. Hover-driven playback. Video stays paused and hidden until hover, then plays instantly and resets on mouse-out. Touch devices auto-switch to tap-to-play, with keyboard and ARIA support built in.
3. Animated progress track. A loading-bar line runs beside the title while the video plays, adding pace to each card. Scroll while hovering and it accelerates with your scroll speed.
4. Styleable title overlay. Position in any corner, plain text or bordered badge, full typography control via Framer's native font controls.
5. Built for portfolios. Independent fade-in/out timing, adjustable corner radius and aspect ratio, plus zoom controls for Vimeo and YouTube — fits tight thumbnails or full-bleed hero tiles.
6. Optimized under the hood. Playback and the progress bar run outside React state for smooth animation, Vimeo/YouTube are driven via native postMessage — no SDK overhead, and video stays paused until it's needed.
Perfect for:
Video production studio reels — cards tease the edit before the click
Director / Editor / Motion designer portfolios — hover replaces a "watch reel" button
Agency case-study grids — hover shows a BTS clip instead of a static screenshot
Photography sites — subtle video texture on a handful of key cards
Product or event galleries — YouTube/Vimeo embeds, zoomed in to hide platform chrome
Video Hover Card turns any project thumbnail into a living preview. On hover, a static cover image crossfades into video — no autoplay clutter, no page reload, just work in motion the moment someone pays attention.
1. Three video sources, one component. Upload a file, or paste a Vimeo/YouTube URL — the ID is auto-extracted into a clean, chrome-free embed. Switch sources anytime from one property.
2. Hover-driven playback. Video stays paused and hidden until hover, then plays instantly and resets on mouse-out. Touch devices auto-switch to tap-to-play, with keyboard and ARIA support built in.
3. Animated progress track. A loading-bar line runs beside the title while the video plays, adding pace to each card. Scroll while hovering and it accelerates with your scroll speed.
4. Styleable title overlay. Position in any corner, plain text or bordered badge, full typography control via Framer's native font controls.
5. Built for portfolios. Independent fade-in/out timing, adjustable corner radius and aspect ratio, plus zoom controls for Vimeo and YouTube — fits tight thumbnails or full-bleed hero tiles.
6. Optimized under the hood. Playback and the progress bar run outside React state for smooth animation, Vimeo/YouTube are driven via native postMessage — no SDK overhead, and video stays paused until it's needed.
Perfect for:
Video production studio reels — cards tease the edit before the click
Director / Editor / Motion designer portfolios — hover replaces a "watch reel" button
Agency case-study grids — hover shows a BTS clip instead of a static screenshot
Photography sites — subtle video texture on a handful of key cards
Product or event galleries — YouTube/Vimeo embeds, zoomed in to hide platform chrome
Dacil Kairo
