Framer component · $12
Curtain Count
A logo preloader. Your logo fills up while a number counts to 100, then a curtain lifts and shows the page. It runs from the first paint, so the page never flashes first.
Curtain Count
Your page is here
This box plays again each time it comes into view.
Five looks
Each card has its own preloader (Covers: This box). It plays when the card scrolls into view. Scroll away and back to see it again.
Page
Fill
The logo fills up with the count. Number in the corner. Opens up.
Page
Rise
The logo rises in, a bar under it. Splits in the middle with a blue second color.
Page
Percent
A smooth count with a percent sign under the logo. Shrinks into a circle.
Page
Edge
A thin bar along the bottom edge. Drops down.
Page
Color
Your colors: any background with a dark logo. Fades.
Details
From the first paint
It runs on plain CSS, so it is on screen before the page’s JavaScript loads. The page never flashes before the preloader.
Your logo or your name
Upload a logo image, or type your name and pick a font. It fills up, rises in, fades in, or stays still.
Number and bar
A number in the corner or under the logo (007, 42, 100%), and a bar under the logo or along the edge.
Stepped or smooth
Stepped runs and pauses like a real load. Smooth eases from 0 to 100.
Once per visit
Shows on the first page of a visit only, or on every page.
Reduced motion
Visitors who turn off motion get no preloader. It never takes clicks after it has gone.
Settings
Covers
Screen: the whole page on load. This box: over an image or a section, playing when it scrolls into view.
Shows
Once per visit (the first page someone opens), or every page.
Logo / Text
A logo image with its width, or your name in any font.
Logo motion
Fills with the count, rises in, fades in, or stays still. Faint copy: how visible the unfilled logo is.
Number
In the corner, under the logo, or none. Digits (007 or 7) and a percent sign.
Bar
Under the logo, along the screen edge, or none, with its height.
Rhythm
Stepped runs and pauses like a real load. Smooth eases from 0 to 100.
Background / Second color / Color
The curtain, an optional second curtain that trails it, and the color of the logo, number and bar.
Delay / Count time / Hold at 100 / Opens / Open time
When the count starts, how long it takes, the pause at 100, and how the curtain leaves: up, down, split, circle or fade.
Show on canvas / Z index
Show it on the canvas to set the look. Raise the Z index if something shows above it.
How to use it
01
Buy it, then open the component link from your receipt.
02
Paste it on any page of your Framer project (⌘V).
03
Change the settings in the right panel. Preview to see it move.
From the same maker
Framer templates by H SHIFT WORKS
CIRCLED
Booking site for portrait and wedding photographers.
View template →
AGENDA
Conference site with schedule, speakers and venue.
View template →
OFFSET
Studio site for an independent digital agency.
View template →
TRUSS
Site for renovation and design-build companies.
View template →
GAZE
Dark, photo-led portfolio for one visual artist.
View template →
© 2026 H SHIFT WORKS. Framer templates, plugins and components.
framer.com/@hshiftworks
X: @hshiftworks