Marketing

Preview Card Slideshow

Pronew

A cover image that scrubs through a gallery as the pointer moves across it.

Render from the Soft Matter 3D shape pack — Soft Matter · 3D shapesMove across to preview

Installation

npx shadcn@latest add @blank-pro/preview-card-slideshow

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { PreviewCardSlideshow } from "@/components/ui/preview-card-slideshow"

<PreviewCardSlideshow
  media={["/cover.jpg", "/detail-1.jpg", "/detail-2.jpg"]}
  ratio={4 / 3}
/>

The card is split into as many vertical bands as there are images; the pointer's band picks the frame, and leaving the card returns to the cover. Only the cover loads up front. The rest load on first hover and are skipped until they have arrived, so scrubbing never flashes an empty frame. Video URLs (.mp4, .webm, .mov) play while their frame is showing.

The cover is the only frame exposed to assistive technology — give it an alt that describes the product, and pass priority for cards above the fold.

API Reference

Prop	Type	Default
`media`	`(string \| { src: string; alt?: string; type?: "image" \| "video" })[]`	—
`ratio`	`number`	`4 / 3`
`indicator`	`boolean`	`true`
`priority`	`boolean`	`false`
`mediaClassName`	`string`	—