Frontend y UI

Dither Background

Fondo en canvas con dithering Bayer 4x4 visible y píxeles cuadrados.

Qué es

Una receta de canvas que renderiza un campo procedural casi negro a partir de value noise, FBM y un umbral Bayer 4x4, dibujado como celdas cuadradas ampliadas.

Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and
Del SKILL.md original

Por qué importa para el diseño

  • Las celdas ampliadas mantienen legible la matriz de dither en vez de colapsar en grano de película.
  • La paleta monocroma de seis pasos mantiene legible la tipografía en primer plano sin un overlay pesado.
  • El viñeteado y la masa descentrada dan una única zona focal brillante, no un brillo uniforme.

Qué cubre

  • Visual target
  • HTML and CSS
  • Canvas recipe
  • Tuning knobs
  • Composition notes
  • Quick checks

Cómo instalarlo

Dither Background

  1. Clona el repositorio.

    git clone https://github.com/MengTo/Skills
  2. Señálale a Codex el archivo de la skill.

    agent-skills/web-design/dither-background/SKILL.md
  3. Luego describe la interfaz que quieres. Codex sigue la skill.

Cómo ejecutarlo con Codex

  1. Coloca el canvas fijo detrás del contenido y pon pointer-events en none.

  2. Ajusta cellSize entre 5px y 10px para la legibilidad de la matriz.

  3. Ajusta los valores de wave, cloud, ridge y vignette para modelar la masa.

Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.

Más en la lista codex-design ↗

Siguiente paso

Diseña con Open Design, sin montar nada

Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.