xiry.

Design · Tip

Hover-Play Video Cards Starting on Thumbnail Frame

Interaction pattern for seamless video card previews on hover

From the Xiry library · Updated 11 October 2026

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's 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
Topic
Micro-Interactions
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: 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

    Curated collection of micro-interactions and delightful design details

  • Phase

    Animation and micro-interaction tool for product designers

  • Viewport UI

    Curated digital product UI and interaction design inspiration gallery

  • 15 UI Sites You'll Need

    Curated collection of 15 UI and design resources for polished websites.

  • Devouring Details

    Interactive reference manual and downloadable React components for micro-interactions and interface craft

  • LottieFiles

    Platform to create, edit, test, and ship lightweight Lottie animations.

Updated