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

I created a Progressive Motion Blur visualiser that illustrates the concept further and shows my proposed `motion-blur` CSS property in action by simulating the blur effect using `HTML Canvas API`. 

The code can be seen here:
[Progressive Motion Blur | Github Repo](https://github.com/yashrajbharti/progressive-motion-blur)
And here,
[Progressive Motion Blur | Codepen](https://codepen.io/driftblaze/pen/NWQmyKY)

The proposed syntax looks like this:

```css
filter: motion-blur(<Angle>, <Offset-X>, <Offset-Y>, <Initial-Blur-Value>, <Incremental-Value>, progressive);
```

Further, I thought more about each of the Instance parameters and the values they might represent, here it is:

| **Parameter**       | **Description**                                                                                     | **Type**        | **Default** | **Allowed Values**                 |  
|----------------------|-----------------------------------------------------------------------------------------------------|-----------------|-------------|------------------------------------|  
| `direction`          | The angle or keyword specifying the direction of the blur effect.                                  | `string`/`int`  | `"to right"` | See the **Direction Keywords** section. |  
| `offsetX`            | The horizontal offset where the blur starts.                                                       | `number`        | `0`         | `0 - 1` (relative to canvas width) |  
| `offsetY`            | The vertical offset where the blur starts.                                                         | `number`        | `0`         | `0 - 1` (relative to canvas height)|  
| `value`              | The initial blur value in pixels.                                                                  | `number`        | `0`         | Any positive number.               |  
| `increment`          | The incremental blur value applied progressively along the direction.                              | `number`        | `0.02`      | Any positive number.               |  

---

More details are on the [README](https://github.com/yashrajbharti/progressive-motion-blur/blob/main/README.md)

I tested the visualiser on **Chrome**. It's known to not work in Safari due to safari lacking support for `ctx.filter` [Canvas Filters | Caniuse](https://caniuse.com/mdn-api_canvasrenderingcontext2d_filter)

I’m open to suggestions! The goal of this tool is to support the draft and provide a visual reference for how progressive motion blur might work in CSS. If you spot anything I may have missed or have ideas for enhancement, I’d love to hear it!

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


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

Received on Sunday, 17 November 2024 03:32:55 UTC