Cinematic PageLoader

Cinematic PageLoader
Cinematic PageLoader

About Cinematic PageLoader

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.

From Deven Web Studio

Neo CTA 3D Flip Card
FuturisticDonutChart
Glow Counter Cards
RingScroll indicator

Related Components

Minimal pre-loader
Reveal Pre-loader
Web Preload
Aurora Ring Loader