Skip to content

component

PreloadPro

By The Codejuring Universe

Details

Summary

PreloadPro Make your website's first impression unforgettable.

Description

PreloadPro Make your website's first impression unforgettable. PreloadPro covers the screen with bold vertical strips, reveals animated scrolling words, then peels away strip by strip — exposing your page with a cinematic transition. How it works On page load, 4 full-height strips instantly fill the screen. Your static label appears first on the left, followed by a scrolling word ticker on the right that cycles through up to 10 custom words. Once the sequence completes, the strips exit one by one in a staggered random order (1→3→4→2), revealing your site underneath. On mobile, the layout automatically simplifies to 2 strips — one for each text element — keeping the experience clean and fast on smaller screens. What you can customize Left static text and up to 10 scrolling words Strip background color Left text color and scrolling word accent color Font family — choose from 10 presets including Syne, Playfair Display, DM Sans, Inter, and more, or type any custom font loaded in your project Font weight from Light to Black Font size independently for desktop and mobile Divider line color and thickness between strips Word scroll speed, strip exit stagger, and exit animation duration On Complete event — connect it to show your page content or trigger any interaction Who is this for Designers and developers who want a premium loading experience on their Framer site without writing a single line of code. Works great for portfolios, agencies, product launches, and any site where first impressions matter. Setup Drop the component onto your page, set it to Fixed position, set width and height to 100%, and customize from the right panel. That's it.

Introduction

Upgrade Your Website’s First Impression

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400144298/148/228/309/79/15
  • All · #2454