Scroll Blur Overlay

This component applies a dynamic backdrop blur that increases as users scroll, mimicking the frosted glass effect found throughout iOS interfaces.

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.