A production-ready preloader component for Framer that keeps your content hidden until the page is fully loaded. Built with pure React and requestAnimationFrame for silky-smooth, jank-free animations on any device.
How It Works
When the page loads, AKPreloader takes over the screen with a dark overlay. A small image box opens from the center, cycles through your photos one by one, then closes. The dark layer slides upward revealing a splash screen with your custom text. After a short hold, the splash slides away and your content appears — all in one fluid sequence.
If the page hasn't finished loading by the time the image cycle ends, the component loops through the images again automatically until everything is ready. No content ever flashes before it's loaded.
Features
Images
- Open-ended image array — add as many or as few as you need
- Upload directly from the Framer right panel, no external URLs required
- Images cycle with a smooth crossfade transition
Typography
- Full Framer font control — family, weight, size, line height, letter spacing
- Separate color picker for the splash text
- Edit the splash text directly from the right panel
Colors
- Dark layer background color
- Splash layer background color
- Progress bar track and fill colors — all independently controlled
Timing
- Six independent timing controls in milliseconds: image box open, cycle speed, image box close, dark layer slide, text hold duration, and content reveal
- Fine-tune the entire sequence feel without touching the code
Behavior
- Automatically covers the full screen at any viewport size — fixed, 100vw × 100vh, z-index 9999
- Loops image cycle if page load takes longer than expected
- Disappears completely from the DOM after the sequence ends — zero performance overhead afterward
- Canvas preview mode with a Replay toggle to re-run the animation without leaving the editor
No dependencies beyond React and the Framer SDK.
Khalid Abukotsh
