Intro Preloader

A full-page intro preloader that piles up photos as assets load — oversized status type, a tabular percent counter, an asset-name ticker, and a zoom-through reveal once everything is ready.

Customize

Exit

Photos6

Min duration3.0s

Hold at 100450ms

Speed1.0×

Tilt spread10°

Counter

Progress bar

Asset ticker

Usage

import { IntroPreloader } from "@/components/lazy-ui/intro-preloader";

const IMAGES = [
  "/images/gallery/01.webp",
  "/images/gallery/02.webp",
  "/images/gallery/03.webp",
  "/images/gallery/04.webp",
  "/images/gallery/05.webp",
  "/images/gallery/06.webp",
];

// Optional: your app's real loading manifest. Omit `items` and the
// ticker generates plausible file names instead.
const MANIFEST = ["bundle.js", "globals.css", "inter.woff2", "api/session"];

export default function Page() {
  return (
    <>
      <IntroPreloader
        images={IMAGES}
        items={MANIFEST}
        exit="zoom"
        onComplete={() => {
          // Overlay is gone — start hero animations here.
        }}
      />
      <main>{/* page content, revealed when the overlay exits */}</main>
    </>
  );
}