Cinematic Preloader

The ultimate first impression for any Awwwards-style website. This component acts as a z-[9999] fixed overlay that runs a beautiful percentage counter. Once loaded, the screen physically splits in half horizontally, sliding apart seamlessly to reveal your application.

Live Preview

Installation

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { CinematicPreloader } from "@/components/creative/cinematic-preloader";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CinematicPreloader } from "@/components/creative/cinematic-preloader";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <CinematicPreloader
        isLoading{true}
        onComplete{/* value */}
        brandName="example"
      />
    </div>
  );
}