Keyhole Page Loader

A multi-step keyhole page loader

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. Setup 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. Key Features 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 Customization 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 For Portfolios, agency websites, high-end landing pages, or any site needing a polished, cinematic intro.

A multi-step keyhole page loader