Skip to content

Scroll Zoom

A cover image or video that starts as an inset card and grows to full-bleed while the reader scrolls past it, for case-study openers and showreels.

Installation

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

Showreel opener

A filmmaker’s reel opens from a small window to the whole screen behind a title that stays readable throughout. Uses the kit’s Media for the looping clip.

API Reference

Used in