Scroll Blur Overlay
This component applies a dynamic backdrop blur that gradually increases as users scroll down the page, mimicking the elegant frosted glass effect found throughout iOS interfaces.
Key Features:
Smooth, performance-optimized blur animation tied to scroll position
iOS-style backdrop blur effect for that premium native app feel - Fully customizable blur intensity and scroll distance
Adjustable background color and opacity
Configurable scroll offset to delay when the effect starts
Responsive and works on all screen sizes
Customizable Properties:
Background Color: Set the overlay tint color
Opacity: Control overlay transparency (0-1)
Max Blur: Maximum blur intensity in pixels (0-50px)
Scroll Offset: Delay the blur effect start (0-10000px)
Scroll Threshold: Distance in pixels to reach maximum blur (100-2000px)
How It Works:
Place the component over your content and it will automatically track scroll position. The blur effect starts at your defined offset and gradually increases until reaching your scroll threshold, creating a smooth, professional transition that adds polish to any design - just like iOS.
Perfect For:
Designers looking to add sophisticated iOS-inspired scroll interactions without code, creating modern web experiences with the premium feel of native mobile apps.
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
