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

1. Copy the component – Paste it into your Framer canvas; it will appear in your Assets panel.

2. Place on page – Add it at the top level. It automatically fills the screen and overlays your site.

3. 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 ForPortfolios, agency websites, high-end landing pages, or any site needing a polished, cinematic intro.