Re: [csswg-drafts] Motion Blur Effects (#11134)

I like the idea!

Progressive blur
---

For years I wanted to create progressive/gradual blur in CSS to simulate the tilt-shift camera effect, or reflections of a matte surface in CSS art.

My previous approach—an overlay with hundreds of divs with increasing blur value—was quite heavy on resources or even completely crashed mobile browsers:
- https://codepen.io/tehoko/pen/bGormeX
    <img src="https://github.com/user-attachments/assets/86008c73-3c5f-436a-a924-77b5d93aa2ac" width="200" />
- https://codepen.io/tehoko/pen/bGovwbN
    <img src="https://github.com/user-attachments/assets/bada4f38-4404-4bb3-a0d8-eefb99677c74" width="200" />
- https://codepen.io/tehoko/pen/JjrLRLe (animated)
    <img src="https://github.com/user-attachments/assets/ece923b4-19b3-492f-8a76-455b8620c58b" width="200" />

So, having a progressive blur filter would be very helpful to achieve a similar result without significant performance hit.

I'm wondering whether putting progressive blur under "motion blur" umbrella is semantically correct. In my mind, it isn't related to motion, as I've only seen progressive blur in static contexts, like the aforementioned [tilt-shift photography](https://en.wikipedia.org/wiki/Tilt%E2%80%93shift_photography), matte reflections, or [soft shadows (umbra, penumbra)](https://en.wikipedia.org/wiki/Umbra%2C_penumbra_and_antumbra) cast by objects lit by a large light source.

<img src="https://github.com/user-attachments/assets/2a6a0a77-7ef1-4328-979e-6a44961d3f0d" width="200" />


I'm also wondering about the `increment` parameter. I made the CodePens above so I'm aware what it does, but this parameter is very technical and is usually a rather small value (like 0.02 and 0.045 in your examples). I think that programmers would be more interested in controlling start+end blur radius, instead of start+increment. This would be a more intuitive behavior in my opinion—e.g. I want the blur to progress from 0px to 8px, so that's what I define in the function and don't care about the resulting increment.

Similarly with its offsets: I think a start **and end** offset would be useful, kind of defining gradient stops.

Radial blur
---

Some image editors (e.g. Photopea) split radial blur into **zoom blur** (movement towards the center) and **spin blur** (rotation around the center). If CSS were to get zoom blur and motion blur, I think spin blur would be a good addition to the overall package.

- Zoom blur
    <img src="https://github.com/user-attachments/assets/d676340c-2d1c-428a-8717-de3d9bcb508f" width="300" />
- Spin blur
    <img src="https://github.com/user-attachments/assets/ff860eb2-751c-48c9-9142-d78b288d632d" width="300" />

For zoom blur, I'd like to clarify whether the blur would be **constant** alongside the radius, or **maybe it should be progressive as well**. A constant zoom blur might look weird in the center and don't really sell the effect. If you look closely at the pictures you posted, you can see that the center is less blurry than the edges. As a result, I'd suggest treating zoom blur similarly to progressive blur, with start+end blur values and start+end offsets.

Summary
---

Since these blur types (linear, radial, progressive) require a different set of parameters, I would suggest against putting them under one `filter: blur()`, only distinguished by the last parameter `linear`, `radial`, `progressive`. Instead, I believe using the approach from gradients would be much easier to work with, understand, and parse.

My suggestion would be:

- No change to the old **Gaussian blur** – `filter: blur(radius);`
    - `filter: blur(10px);`
- **Motion blur (linear)** – `filter: linear-blur(radius, angle);`
    - `filter: linear-blur(10px);`
    - `filter: linear-blur(10px, to right);`
    - `filter: linear-blur(10px, 45deg);`
- **Motion blur (zoom)** – `filter: zoom-blur(radius-start and radius-end, position, offset-start and offset-end);`
    - `filter: zoom-blur(10px);`
        - constant zoom blur at the center
    - `filter: zoom-blur(0px 20px, circle at 10% 10%);`
        - natural-looking zoom blur, growing from 0px in the origin to 20px at the end
    - `filter: zoom-blur(0px 20px, ellipse at right 8%, 2rem 8rem);`
        - no blur in the origin point, at 2rem starts to grow, at 8rem reaches 20px, stays at 20px till the end
- **Spin blur** – `filter: spin-blur(radius, position);`
    - `filter: spin-blur(10px);`
    - `filter: spin-blur(10px, ellipse at right 8%);`
- **Progressive blur** – `filter: progressive-blur(radius-start and radius-end, angle, offset-start and offset-end);`
    - `filter: progressive-blur(0px 10px);`
    - `filter: progressive-blur(2px 10px, 45deg);`
    - `filter: progressive-blur(2px 10px, 45deg, 2rem);`
        - 2px blur at the start, 2rem later the blur increases, and reaches 10px at the end
    - `filter: progressive-blur(2px 10px, 45deg, 2rem 8rem);`
        - 2px blur at the start, 2rem later the blur increases, reaches 10px at 8rem, stays at 10px till the end

All of the above would also apply to `backdrop-filter`, of course.


-- 
GitHub Notification of comment by oczki
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11134#issuecomment-2513753673 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 3 December 2024 07:31:14 UTC