Skip to content
Portfolio Kit

Parallax

Scroll-linked depth: layers that drift slower or faster than the page, and media that glides inside its frame. One shared animation frame, paused offscreen, still with reduced motion and in print.

Installation

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

Layers

A hero with depth: shapes at different speeds around a headline, and a line of type that slides sideways with axis="x".

Media in a frame

ParallaxMedia glides case-study images inside their frames as you scroll, so big images feel like windows rather than stickers.

API Reference