---
title: "Cinematic PageLoader — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Deven Web Studio · Loaders. A sleek and customizable page loader component for Framer that displays animated words with fade effects, optional logo…"
canonical: "https://framer.elliotli.dev/component/cinematic-pageloader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Cinematic PageLoader

# Cinematic PageLoader

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

![Cinematic PageLoader preview image 1](https://framer.elliotli.dev/og/component/cinematic-pageloader/d55f1ce8d1fecc26/1600x1200.jpg)

## Summary

A sleek and customizable page loader component for Framer that displays animated words with fade effects, optional logo, and a cinematic page-reveal split (vertical, diagonal, or…

## Description

A sleek and customizable **page loader component** for Framer that displays animated words with fade effects, optional logo, and a cinematic page-reveal split (vertical, diagonal, or fade-out). Perfect for creating high-end brand intros and immersive website experiences.

✅ Features

-   **Customizable Word Sequence** – Add 3–4 words (or more) that fade in/out sequentially.
    
-   **Final Logo/Text** – Show your brand logo or a final tagline.
    
-   **Split Animations** – Choose between Vertical, Diagonal, or Fade-out page reveal.
    
-   **Background Options** – Change background color and opacity.
    
-   **Typography Controls** – Customize font family, font size, and text color.
    
-   **Homepage or All Pages** – Choose whether to display only on the homepage or across the site.
    
-   **One-time Load Option** – Option to show the loader only once per visitor (via localStorage).
    
-   **Smooth Scroll Reveal** – Background splits into two parts (top/bottom or diagonal) that animate away smoothly.
    
-   **Framer Native** – 100% built for Framer with property controls.
    

💡 Use Cases

-   Branding intros for agencies, startups, or creative studios.
    
-   High-end product websites requiring a **cinematic first impression**.
    
-   Personal portfolios that want a **signature entrance animation**.
    
-   Event or campaign sites where **storytelling starts at page load**.
    

🛠 Built For

-   **Framer Sites**
    
-   Modern landing pages, portfolios, and SaaS startups.
    
-   Designers & developers who want **polished intros without custom coding**.
    

📖 Instructions

1.  **Install Component** into your Framer project.
    
2.  Select the component on the canvas.
    
3.  In the right-hand panel, configure:
    
    -   **Words** → Add up to 4 words to animate.
        
    -   **Final Text/Logo** → Add your brand name/logo to display at the end.
        
    -   **Background** → Choose background color & opacity.
        
    -   **Text Styling** → Set font family, font size, and font color.
        
    -   **Split Animation** → Pick Vertical, Diagonal, or Fade-out.
        
    -   **Show Once** → Toggle if you only want the loader to show once per user.
        
    -   **Pages** → Choose whether loader shows on homepage or all pages.
        
4.  **Preview** → Test the animation. On scroll, the loader will split and reveal your site.
    

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

-   All · #9041

## Details

- **Author**: Deven Web Studio
- **Price**: $10.00
- **Published**: 2025-09-22
- **Updated**: 2025-09-22
- **Added**: 2025-09-13
- **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