Skip to content
Get packs

Dither Background

Adds a dark, animated monochrome pixel-dither background behind web page content

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When installed, the agent can build a near-black, atmospheric background for a web page using a canvas element. It draws large square pixels arranged in a classic ordered-dither pattern, forming slow-moving gray-white waves or cloud-like masses behind your headings, cards, or data panels. The skill supplies the HTML, CSS, and JavaScript recipe, plus guidance on colour, motion, and performance.

Great for

  • Web designers wanting a retro-futuristic dark hero section or landing page backdrop
  • Front-end developers adding a lightweight animated background without images or libraries
  • Dashboard or app builders who want a subtle background that keeps data overlays readable

Skip it if

  • Projects needing colourful brand gradients or photographic imagery, since the skill explicitly avoids them
  • Low-power devices or pages where continuous canvas animation is a concern; the skill redraws every frame unless reduced motion is set
  • Accessibility-critical pages without checking contrast, since the skill only gives general readability guidance

Try asking

  • “Create a dark dither background behind my hero section with slow drifting waves”
  • “Add an atmospheric monochrome canvas background behind my dashboard cards”
  • “Build a near-black pixel-cloud backdrop for a landing page that respects reduced motion”
Step-by-step guide: how to use Dither BackgroundInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    dither-background.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dither-background.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dither-background.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask for a specific cell size (5 to 10px) to control how legible the Bayer pattern is
  • Keep the brightest area off-centre and place text on the darker vignetted edges for readability
  • Check the page with prefers-reduced-motion enabled and on a phone to confirm performance

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.