---
title: "Keyhole Page Loader — Framer component · Best of Framer"
description: "$10.00 · Framer component · by ES · Loaders. A multi-step keyhole page loader"
canonical: "https://framer.elliotli.dev/component/keyhole-page-loader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Keyhole Page Loader

# Keyhole Page Loader

A multi-step keyhole page loader

[View on Framer](https://framer.com/marketplace/components/keyhole-page-loader/?via=elliot-li)

![Keyhole Page Loader preview image 1](https://framer.elliotli.dev/og/component/keyhole-page-loader/b7719da369537ccf/1600x1200.jpg)

## Summary

A multi-step keyhole page loader

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7442

## Details

- **Author**: ES
- **Price**: $10.00
- **Published**: 2026-03-24
- **Updated**: 2026-03-24
- **Added**: 2026-03-11
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story