Skip to content
Portfolio Kit

Hover Video

A muted clip that plays while its card is hovered or focused with the keyboard, over a poster or artwork. Loads nothing until then, pauses off screen and in background tabs, and stays still on touch screens, with reduced motion or when saving data.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/hover-video
First time? Add the @portfolio-kit registry to components.json
components.json
{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Usage

Examples

In a list

A motion designer’s index: each row’s thumbnail plays its clip while the row is hovered or focused, and rewinds when you move on.

API Reference

Used in

Designer template