Layered Dithering

A project that uses dithered layers and transparency to compose an image.

A screenshot showcasing the website

A screenshot showcasing the website

Contents

About

(This project is still under development)

This is one of my latest projects!

I was investing some time to learn about image processing, and I stumbled across the concept of image dithering. That lead me to a bunch of articles talking about it, as well as some very cool apps that would allow you to do this process.

While testing with those apps, I began to have some ideas of using this process on different layers and with alpha channels, to generate some interesting pixel masks… And that’s how this idea was born.

This project was originally written in Svelte, but I had to switch to NextJS because I ran into issues when implementing drag & drop on custom components and I knew Framer Motion already had solutions for this.

I’m still trying to upgrade performance and remake the UI so it feels nicer to use, and I’m considering switching from NextJS to something even simpler and lighter to increase performance, as well as trying out some OffscreenCanvas to run the app in WebWorkers.

The site is made with:

Visit the website .

View the source code .