Progressive Blur Effect

The Progressive Blur Effect Visualizer is a WIP (work in progress) tool to showcase the syntax for motion blur effects, specifically the progressive motion blur, where the value of blur increments in the direction of blur (like acceleration). This work is created by me 👋, and is in support of the W3C css-wg-draft issue #11134. The motivation to do this originally came from the motion blur issue #3837 by Adam Argyle (Google Chrome CSS DevRel), whose work inspired me to propose motion blur as a native CSS property, similar to the blur filters available in SVG—eliminating the dependency on SVG for such effects. The Progressive Motion Blur can also function as a Partial Blur effect when only offset and blur values are provided, without incremental changes. This tool is designed to visualize the concept of progressive motion blur and may evolve as per feedback and requirements. If you'd like to contribute or suggest improvements, feel free to explore the GitHub repo or the CodePen.

filter: motion-blur(angle, x-offset, y-offset, value, increment, progressive)