An image filter library for the web, with over sixty filters that chain together. Blur, edge detection, chromatic aberration, posterising, normal maps and motion detection, running on the GPU, on photos, video or a webcam, live.

What it does

• Filters compose. Every filter takes an image and returns one, so a CRT is just three of them in a row: a lens curve, scanlines and a vignette.
• It does what CSS can't. CSS already does blur and saturation. Clarity is for colour bleed, posterising, normal map generation, motion detection and the rest that the browser has no answer for.
• It makes textures from nothing. Starter filters like Cloud and Woodgrain build procedural textures. Chain them into a palette and a slow scroll, and you get flowing lava or drifting fog.
• A pipeline is a link. A chain is plain text, like Blur,radius=8/Invert, so the playground keeps it in the URL and any stack you build can be sent to someone.

How it's built

• Every filter is written twice: as a fragment shader, which is the default, and as a CPU implementation behind it. A chain of filters is one draw call each, with no CPU round trip between them, and it falls back to the CPU one stage at a time where WebGL2 isn't available.
• Filters describe themselves. Each carries a schema of its settings, so an app can build controls for filters it has never seen. Every control in the playground is generated that way.
• Pinned by golden images. Each filter's output is compared pixel for pixel against committed reference images, and a browser test checks that the GPU and CPU paths agree.
• No dependencies. It runs in Node against plain image data as well as in the browser. It's published to npm as @calrk/clarity, with a Svelte action for applying filters straight to an <img>.