Skip to content

Showreel

A large poster with a play button that follows the cursor; it opens your reel in a full-screen player (or plays it in place), with a duration label and a quiet coming-soon state.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/showreel
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

Inline

mode="inline" plays the reel inside the frame instead of full screen. Here the frame is portrait on phones and widescreen from md up.

Coming soon

Leave out src while the reel is still in the edit: the poster stays, and the play button becomes a quiet label.

With a preview loop

Add preview for a short, muted loop behind the play button. It plays only while on screen and never loads under reduced motion or Save-Data, where the poster stays.

API Reference