About dithercn
dithercn is an open-source dither engine for shadcn/ui projects, with an agent skill that teaches your coding agent to use it. Leo builds and maintains it, and it's published by OpenCore, the GitHub organization behind Social SDK, Email SDK and other open-source TypeScript tools.
What dithercn is
Three parts that work together. dither-core is the engine: it installs into lib/dither as plain source and turns a tone between 0 and 1 into dots, drawn with WebGL, SVG, CSS masks or a one-off pass for images. The agent skill is a SKILL.md with references that teaches Claude Code, Codex, Cursor and other agents how to build with that engine. The examples, from hero backgrounds to charts, loaders, text effects and dithered photos, show what the engine can make and install with one shadcn command.
Nothing runs on our servers once it's installed. Every file lands in your repo, so you can read it, change it and ship it like the rest of your code.
Why it exists
Dithering draws a smooth tone with a few colours by placing dots of ink at a matching density. It started as a workaround for limited screens and printers and now reads as a deliberate texture. Most dither effects on the web are one-off shaders that are hard to theme, ignore reduced motion and don't share anything with each other.
dithercn puts one engine under every effect, so a background, a chart fill and a loading state share the same cells, colours and motion rules. Because the skill teaches the engine rather than a fixed list of components, your agent can build a dither nobody has made yet instead of copying the closest example.
License and credits
dithercn is free and MIT licensed. The source lives at github.com/opencoredev/dithercn.
Dither Kit by Boring Software set the bar for this project, and Dither Kit credits EvilCharts for the dithered chart style it grew from. The code and the look here are our own.
dithercn · Last updated 2026-10-25