This Preloader is a full-screen, multi-step preloader that introduces your website with a cinematic keyhole cut-out animation. Frames and images animate in stages, creating a smooth, engaging entrance before revealing the page.
Copy the component – Paste it into your Framer canvas; it will appear in your Assets panel.
Place on page – Add it at the top level. It automatically fills the screen and overlays your site.
Optional: Multiple pages – Paste on additional pages to maintain consistent loading animations.
Dynamic keyhole cut-out reveals content step by step
Fully customizable colors, layout, timing, and exit transitions
Smooth, staged animations built with Framer Motion
Optional scroll lock during loading
Automatically clears and unlocks scrolling when complete
Responsive and works across all screen sizes
Media replacement
Easily swap media with your own visuals
Perfect for portfolios, projects, or custom content
Color control
Background color can be customized
Shadow color can be customized
Default setup uses a black background
Perfect ForPortfolios, agency websites, high-end landing pages, or any site needing a polished, cinematic intro.
ES
