Key Features:
Smooth, performance-optimized blur tied to scroll position
iOS-style backdrop blur for a premium native app feel
Viewport-relative positioning — works under sections of any height, including 100vh heroes, with no manual pixel offset
"Extend Above" mode to blur the section above instead of its own section
Threshold in px or vh, so the effect feels consistent across screen sizes
Responsive on all screen sizes and breakpoints
Customizable Properties:
Background Color: overlay tint color
Opacity: overlay transparency (0–1)
Max Blur: maximum blur intensity (0–50px)
Start Line: viewport point (0–100vh) where blur begins
Threshold: scroll distance to reach max blur, in px or vh
Extend Above: shifts the overlay up by its own height to blur the section above it
How It Works: Place the component inside a section — it automatically tracks its own position relative to the viewport, no offset math needed. Blur starts at your Start Line and increases until your Threshold, creating a smooth transition. Enable Extend Above for sticky-stacked layouts or full-height heroes.
Perfect For: Designers adding sophisticated iOS-inspired scroll interactions without code, for full-screen heroes and sticky-stacked layouts.
Refund Policy: Due to the digital nature of this product, all sales are final and non-refundable. Refunds are only provided if there is a documented technical issue where the component does not work as intended or as described. Refunds will not be issued if the component works correctly but does not meet your expectations or does not work the way you would prefer.
Key Features:
Smooth, performance-optimized blur tied to scroll position
iOS-style backdrop blur for a premium native app feel
Viewport-relative positioning — works under sections of any height, including 100vh heroes, with no manual pixel offset
"Extend Above" mode to blur the section above instead of its own section
Threshold in px or vh, so the effect feels consistent across screen sizes
Responsive on all screen sizes and breakpoints
Customizable Properties:
Background Color: overlay tint color
Opacity: overlay transparency (0–1)
Max Blur: maximum blur intensity (0–50px)
Start Line: viewport point (0–100vh) where blur begins
Threshold: scroll distance to reach max blur, in px or vh
Extend Above: shifts the overlay up by its own height to blur the section above it
How It Works: Place the component inside a section — it automatically tracks its own position relative to the viewport, no offset math needed. Blur starts at your Start Line and increases until your Threshold, creating a smooth transition. Enable Extend Above for sticky-stacked layouts or full-height heroes.
Perfect For: Designers adding sophisticated iOS-inspired scroll interactions without code, for full-screen heroes and sticky-stacked layouts.
Refund Policy: Due to the digital nature of this product, all sales are final and non-refundable. Refunds are only provided if there is a documented technical issue where the component does not work as intended or as described. Refunds will not be issued if the component works correctly but does not meet your expectations or does not work the way you would prefer.
Filip Banasiak
