r/web_design • u/eightshone • 1d ago

Dither blur effect - Update

Post image

Hello people
I have made some changes to the experiment I was doing the other day: making a dithered blur effect inspired from the original PlayStation
This purely for fun and for the sake of trying something new

I have put the code in a GitHub repo for anyone interested in checking out (it’s nothing fancy tho 😅)

I have changed my approach from last time and tried explaining it in the readme file (which contains a video showcasing the effect better)

If you have any questions let me know

Have a good day 👋🏼

[edit]: forgot the repo link 😅

38 Upvotes

95% Upvoted

3 comments sorted by

4

u/iBuildRandomStuff 1d ago

looks great. if you ever hit perf issues, rendering the dither on a lower-res buffer and scaling it up with image-rendering: pixelated keeps the look and is way cheaper than doing it at full res. ordered bayer tends to look cleaner than random noise on moving stuff too

2

u/Shomriddho 1d ago

this would be really cool as a react component in the shadcn registry

1

u/No-Veterinarian7542 3h ago

I had a blur effect in a client mockup turn into a muddy smudge once it was down to phone size. Does yours hold up smaller?