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
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
-
Clona el repositorio.
git clone https://github.com/MengTo/Skills -
Señálale a Codex el archivo de la skill.
agent-skills/web-design/dither-background/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Coloca el canvas fijo detrás del contenido y pon pointer-events en none.
-
Ajusta cellSize entre 5px y 10px para la legibilidad de la matriz.
-
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.