Skip to content
Portfolio Kit

Page Transition

View Transitions helpers for any router: startPageTransition(), preset animations (fade, slide-up, curtain, zoom) and shared-element names. Instant with reduced motion or without browser support.

Installation

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

Shared elements

Open a project: its cover and title morph into the case-study header through ViewTransitionName, the rest of the page slides up, and focus moves to the new heading (and back to the card on return).

Filtered grid

Not just for pages: name every card and wrap the filter change in startPageTransition(), and cards glide to their new places while the rest fade in and out.

API Reference