# Hover-Play Video Cards Starting on Thumbnail Frame

> Interaction pattern for seamless video card previews on hover

This UI micro-interaction pattern plays a video preview when hovering over a card, starting directly from the exact frame displayed in the thumbnail. Instead of streaming the full asset, it loads a lightweight loop to keep performance fast while avoiding visual jumps.

## How it works

On Linear's /now page, hovering over a video card plays the video starting from the frame visible on the thumbnail, so the preview matches nicely. Implementation detail from the thread: the whole video is not loaded — just a short loop. Implemented by @didiercatz. The Coinbase card (city traffic footage) is noted as especially satisfying.

## What it is for

- Design smooth hover previews for video-heavy card layouts
- Prevent visual jumping when transitioning from static poster frames to playing video
- Optimize page load performance by serving lightweight preview loops instead of full videos

## Key points

- Matches video playback start time directly with the static thumbnail poster frame
- Serves a short, optimized loop rather than buffering the full video file
- Triggers playback instantly on card hover
- Provides a seamless, stutter-free transition between preview states

## Pricing

Free

## Details

- Type: Tip
- Category: [Design](https://xiry.app/topics/design.md)
- Open source: no
- Platforms: Web
- For: Front-end developers and UI/UX designers
- Tags: ui, animation, micro interactions, web dev, video, linear

## Why it was saved

- [@emilkowalski, 14 August 2026](https://x.com/emilkowalski/status/2088309251819049399): A reusable micro-interaction pattern for cards with video previews, plus the implementation detail that only a short loop is loaded instead of the whole video.

## Related

- [Design Spells](https://xiry.app/resources/design-spells): Curated collection of micro-interactions and delightful design details (Website, Free)
- [Phase](https://xiry.app/resources/phase): Animation and micro-interaction tool for product designers (Web app)
- [Viewport UI](https://xiry.app/resources/viewport-ui): Curated digital product UI and interaction design inspiration gallery (Website, Free)
- [15 UI Sites You'll Need](https://xiry.app/resources/15-ui-sites-you-ll-need): Curated collection of 15 UI and design resources for polished websites. (List, Free)
- [Devouring Details](https://xiry.app/resources/devouring-details): Interactive reference manual and downloadable React components for micro-interactions and interface craft (Article or course, Paid)
- [LottieFiles](https://xiry.app/resources/lottiefiles): Platform to create, edit, test, and ship lightweight Lottie animations. (Website, Freemium)

Updated 11 October 2026. Page: https://xiry.app/resources/hover-play-video-cards-starting-on-thumbnail-frame

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.