Progressive Blur
Blur that increases with scroll depth for parallax focus.
Create a Progressive Blur pattern for an AI-generated interface. It should help with blur that increases with scroll depth for parallax focus. Use a restrained black, white, and gray visual style, strong hierarchy, and product-grade spacing. The interaction should feel layered, practical, and easy to scan.
Do not make the progressive blur flashy, noisy, over-animated, or decorative for its own sake. Avoid random glow, heavy gradients, excessive borders, oversized type, unclear hierarchy, and generic SaaS filler.
{
"id": "progressive-blur",
"category": "effects",
"trigger": "scroll",
"target": "progressive blur",
"duration": "220ms",
"easing": "cubic-bezier(0.22, 1, 0.36, 1)",
"feeling": [
"layered",
"practical",
"precise"
],
"palette": [
"black",
"white",
"gray"
]
}
Usage notes
Short guidance for humans and AI tools before copying the pattern.
Use Progressive Blur when you need blur that increases with scroll depth for parallax focus. It works best when the interface needs clarity before spectacle.
Do not make the progressive blur flashy, noisy, over-animated, or decorative for its own sake. Avoid random glow, heavy gradients, excessive borders, oversized type, unclear hierarchy, and generic SaaS filler.
Create a Progressive Blur pattern for an AI-generated interface. It should help with blur that increases with scroll depth for parallax focus. Use a restrained black, white, and gray visual style, strong hierarchy, and product-grade spacing. The interaction should feel layered, practical, and easy to scan.