Focus Pull is a page reveal overlay for Framer. Your site sits behind a soft veil, out of focus, and comes into focus as a progress bar fills at the top or bottom of the screen. Named after the cinematography move, it borrows the same feeling: attention pulling from haze into clarity.
Everything is configurable. Blur strength, duration, easing, veil color and opacity, bar position, thickness, fill and track colors, radius and inset. Add a logo or a short line of text in the center, or leave it clean.
TWO PROGRESS MODES
Simulated runs on a timer with your chosen easing curve. Predictable, identical every time, ideal when the reveal is purely aesthetic.
Real assets tracks the actual page: document readiness, web fonts, and every image in the DOM. The bar reflects what is genuinely loading, smoothed so it never jumps. A minimum duration keeps it from flashing on fast connections, and a maximum wait releases the overlay if an asset stalls.
BUILT FOR PRODUCTION
Renders through a portal, so it covers the viewport no matter where you place it on the canvas.
Blur is quantized into discrete steps instead of animated continuously, which keeps it smooth on mobile Safari.
Shows once per session by default, so visitors do not see it again on every internal page.
Respects prefers-reduced-motion and skips entirely when the visitor has it enabled.
Optional dismiss on click or Escape.
Scroll lock with scrollbar compensation, no horizontal jump on desktop.
Screen reader friendly, with a polite live region and milestone announcements.
Start and complete event handlers, so you can chain your hero animation to the reveal.
The component stays inert on the canvas. You will see a small placeholder while editing, and the full animation only in preview and on the published site.
Focus Pull is a page reveal overlay for Framer. Your site sits behind a soft veil, out of focus, and comes into focus as a progress bar fills at the top or bottom of the screen. Named after the cinematography move, it borrows the same feeling: attention pulling from haze into clarity.
Everything is configurable. Blur strength, duration, easing, veil color and opacity, bar position, thickness, fill and track colors, radius and inset. Add a logo or a short line of text in the center, or leave it clean.
TWO PROGRESS MODES
Simulated runs on a timer with your chosen easing curve. Predictable, identical every time, ideal when the reveal is purely aesthetic.
Real assets tracks the actual page: document readiness, web fonts, and every image in the DOM. The bar reflects what is genuinely loading, smoothed so it never jumps. A minimum duration keeps it from flashing on fast connections, and a maximum wait releases the overlay if an asset stalls.
BUILT FOR PRODUCTION
Renders through a portal, so it covers the viewport no matter where you place it on the canvas.
Blur is quantized into discrete steps instead of animated continuously, which keeps it smooth on mobile Safari.
Shows once per session by default, so visitors do not see it again on every internal page.
Respects prefers-reduced-motion and skips entirely when the visitor has it enabled.
Optional dismiss on click or Escape.
Scroll lock with scrollbar compensation, no horizontal jump on desktop.
Screen reader friendly, with a polite live region and milestone announcements.
Start and complete event handlers, so you can chain your hero animation to the reveal.
The component stays inert on the canvas. You will see a small placeholder while editing, and the full animation only in preview and on the published site.
