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.
The Codejuring Universe
