Haytham Preloader v2

About this Component

Create a premium loading experience with animated typography, layered image reveals, a progress bar, and a cinematic page transition.

Haytham Preloader animates your name into view, reveals a sequence of images, reduces the title to a custom two-letter mark, then reveals the page underneath. Typography, imagery, colors, spacing, timing, and animation settings are customizable directly in Framer.

Perfect for portfolios, agencies, fashion brands, photographers, architecture studios, personal websites, and premium landing pages.

Key Features

Animated letter-by-letter name reveal

Layered image sequence

Animated progress bar

Custom supporting text

Custom two-letter final mark

Name and final-letter spacing controls

Custom typography and colors

Adjustable animation timing

Optional post-reveal hero text

Scroll-lock controls

Responsive across desktop, tablet, and mobile

No code required

Important Notes

Final Letters determines which two non-space characters remain.

For “Haytham Wali,” 0 = H and 7 = W.

HW Gap controls spacing between the final letters.

Name Spacing controls spacing for the animated name.

Image width and height can be adjusted independently.

Place the component once on the page where the preloader should run.

Customization

Name, typography, letter spacing, supporting copy, images, image size, colors, animation timing, letter motion, final mark, scroll locking, and optional reveal text.

Questions? Reach out at hasanwali6890@gmail.com

Refund Policy

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.