Add dithers to anything in your app.

Dithered shaders and UI for shadcn/ui. One prompt for your coding agent.

Read the docs

Start from an example.

52 components in 5 groups, all built on the engine. Install one as it is, or hand it to your agent to change.

See all 52 in the catalog

Ask for any dither.

The skill teaches your agent the engine, so one sentence is enough: what it is, where it goes, how it should feel.

Field notes for the trail

Maps, routes and the long way round.

A dithered topographic background behind the hero. Slow, and quiet enough to read over.

A 21-line GLSL field on DitherShader, written for this page.

What's inside.

dithercn is an open-source dither engine for shadcn/ui projects, with an agent skill that teaches your coding agent to use it. Everything installs as code in your repo.

The engine

dither-core installs into lib/dither as plain source you own. It turns a tone between 0 and 1 into dots with Bayer and blue-noise threshold matrices, then draws them three ways: a WebGL shader for anything that moves, SVG patterns and CSS masks for static fills, and a one-off pass for photos and logos. Colours come from your shadcn theme, animation pauses offscreen and respects reduced motion, and any dither exports to PNG, SVG or CSS.

The agent skill

A SKILL.md with references that teaches Claude Code, Codex, Cursor, Gemini and other coding agents to use the engine. It walks the agent through picking a technique, writing a field, placing the dither on a landing page or dashboard, colouring it from your theme, and checking it in a browser in light and dark mode at desktop and phone widths.

52 examples in 5 groups

Backgrounds 24
Full-bleed dithered surfaces for heroes, sections and cards. Dither gradient, Dither glow, Mesh gradient, Aurora and 20 more.
Charts 11
Charts and status displays with a dithered fill. Area chart, Bar chart, Line chart, Sparkline and 7 more.
Interface 8
Everyday interface pieces with a dithered finish. Dither button, Avatar, Dither card, Divider and 4 more.
Text 4
Display text drawn, revealed or counted with a dither. Dither text, Dissolve text, Scramble text, Dither number.
Images 5
Your images and logos, dithered. Dither image, Image compare, Scroll reveal image, Dithered logo and 1 more.

One command, then ask.

Add the skill with the skills CLI, for Claude Code, Codex, Cursor or any other agent. Your agent adds the engine the first time it builds a dither.

$ pnpm dlx skills add https://dithercn.dev

.agents/skills/dithercn/: The skill, for Codex, Cursor, Gemini and others.
.claude/skills/dithercn/: The same skill, for Claude Code.
lib/dither/: The engine, added by your agent the first time it builds a dither.
globals.css: --dither-ink, --dither-paper and friends, from your theme.

What to ask your agent

Using shadcn? npx shadcn@latest add https://dithercn.dev/r/dithercn-skill.json installs the skill and the engine together. Installation has both commands.