Preloader Aesthetic

AestheticPreloader - Cinematic Counter Preloader for Framer

A film-grade loading sequence for portfolio and studio sites. Dark, quiet, and precise: a hairline ring, a rolling counter, a flash of your imagery, and a name reveal — closed by a curved-curtain wipe.

The sequence

1. Counter intro — "00" rises into a faint ring, your loading label fades in

2. Stepped count — digits roll through randomized stops (00 → 33 → 61 → 100), different on every load, while the accent arc draws in sync with the numbers

3. The hundred — digits cross into a staggered "100" as the arc completes

4. Image flash — up to 8 photos open one over another in a tilted stack that straightens as it plays

5. Name reveal — your heading rises letter by letter, footer lines follow

6. Curtain exit — an SVG curtain with a lagging curved edge sweeps the preloader away and returns full control of the page

Built for real sites

• Zero-lag engine — a single requestAnimationFrame timeline writes styles straight to the DOM; no re-renders, no transition pileups 

• Interaction-safe — scroll locks while playing; every click is released the moment it's gone 

• Play modes — Always / Once Ever / Once Per Visit

• Responsive — counter, heading, and images rescale to phone; the heading auto-fits any name length • Image-friendly — Framer image controls with automatic srcSet compression

Fully customizable, no code

Heading, loading label, two footer lines, count time (0.5–8s), image flash on/off, up to 8 images, background / accent / text colors, display and footer fonts — all from the properties panel. Defaults ship ready-to-go: Inter on deep black with a white accent.

Under the hood

• Native Framer code component (React + TypeScript), single file 

• No animation libraries — hand-tuned easing curves 

• SVG pathLength arc + clip-path curtain • Pairs with native Appear effects for post-preloader hero choreography