Skip to content
Portfolio Kit

Preloader

Intro screen with a 0–100 counter or cycling greetings, then a curtain lifts to reveal the page. Skippable with a click or any key, can show once per session, and skipped with reduced motion.

Installation

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

Greetings

The words variant flicks through “hello” in several languages on the accent color, each marked with its lang. A warmer intro for a personal site.

Real progress

Feed progress from your own loading (fonts, images, data) and the counter eases toward it, exiting at 100. Here it covers a single card with position="absolute".

API Reference

Used in

Creative Developer template