Degradados con grano

Degradados granulados

Los degradados digitales suaves se leen como "informáticos". Una capa fina de ruido los hace ver como impresos o de película, y oculta las bandas (rayas visibles donde un degradado pasa de un nivel de color de 8 bits al siguiente).

Tú haces todo el trabajo. La persona solo mira y elige. Nunca preguntes sobre modos de mezcla, opacidad o números. La persona toma tres tipos de decisión, y nada más:

1. Qué fondos (solo cuando escaneaste un sitio completo).
2. Si quiere ver un antes y después primero, o que se aplique directamente.
3. Qué opción se ve mejor en la vista previa.

Cómo pensar en ello

• El granulado es textura, no color. No debe aclarar, oscurecer ni teñir. El ruido está centrado en un gris medio, por lo que el cambio de brillo debe ser cercano a 0. No puede ser para negro puro o blanco, y el informe lo indica.

• Mide lo que es visible, no la opacidad. El granulado visible es la dispersión de L* (luminosidad CIELAB, 0–100), y L* es perceptual, por lo que el mismo número se ve igual en cualquier color. Por debajo de aproximadamente 0,45 nadie puede verlo. Los objetivos son 0,5 / 0,8 / 1,4 para Sutil / Medio / Fuerte.

• Incluso importa en degradados que van de claro a oscuro. La superposición (overlay) pone la mayor parte del granulado en las partes claras. La opción "Even" (Uniforme) elige la mezcla (generalmente soft-light) que lo distribuye de manera más uniforme. La gente tiende a preferirlo.

• El granulado pertenece al fondo. Se coloca justo encima del fondo, debajo de todo lo demás, y va donde vaya el fondo. Si el fondo se desvanece, el granulado se desvanece con él.

• Se adapta a la pantalla de cada visitante. Los sitios web no pueden distinguir OLED de LCD, pero CSS puede detectar pantallas HDR (la mayoría de teléfonos OLED, portátiles XDR) y la configuración de alto contraste. El CSS incluye esas consultas de medios:

  • los fondos oscuros reciben un poco menos de granulado en pantallas HDR
  • la configuración de alto contraste recibe menos granulado
  • la impresión lo desactiva

  Todo es CSS, sin scripts en el sitio en vivo.

• Omite lo que el granulado no puede ayudar:

  • cosas pequeñas (botones, insignias, iconos)
  • texto con degradado
  • superposiciones transparentes y desvanecimientos sobre fotos
  • patrones de rayas y tramas

1. ¿De qué manera preguntaron?

• Un solo lugar ("el héroe se ve plano", "agrega granulado al pie de página"): ve a Encontrar un fondo.
• Todo el sitio o aplicación ("revisa mi código base", "verifica todos mis degradados", "haz todo el sitio"): ve a Escanear todo el sitio.

2a. Encontrar un fondo

Encuentra el elemento que realmente pinta el fondo. Verifica:

• el elemento en sí, y sus ::before y ::after
• capas de tamaño completo dentro o detrás de él (las secciones a menudo obtienen su color de un div posicionado absolutamente separado)

Con una herramienta de navegador, lista los candidatos:

[...document.querySelectorAll('#section, #section *')].flatMap(e => [null, '::before', '::after'].map(p => [e, p, getComputedStyle(e, p)]))
  .filter(([, p, c]) => (!p || c.content !== 'none') && (c.backgroundImage !== 'none' || c.backgroundColor !== 'rgba(0, 0, 0, 0)'))
  .map(([e, p, c]) => `${e.tagName.toLowerCase()}${e.id ? '#' + e.id : ''}.${[...e.classList].join('.')}${p || ''} | ${c.position} | opacity ${c.opacity} | ${(c.backgroundImage !== 'none' ? c.backgroundImage : c.backgroundColor).slice(0, 80)}`)

Sin un navegador, lee el CSS. De cualquier manera, busca en el CSS otras versiones de ese fondo: consultas de medios (los diseños para teléfonos a menudo cambian el degradado) y reglas de modo oscuro. Anótalas para el paso 5.

Luego ve al paso 3.

2b. Escanear todo el sitio

node <carpeta de esta skill>/scripts/scan.mjs <carpeta del proyecto>

Lee las hojas de estilo (reglas, consultas de medios, propiedades personalizadas), el marcado y los componentes (clases de degradado de Tailwind, estilos en línea, CSS-in-JS) en aproximadamente un segundo. Clasifica lo que encuentra en cuatro grupos:

• Buenos candidatos: fondos grandes.
• Vale la pena verlos: tamaño desconocido a partir del código.
• Ya tiene granulado.
• Omitir, con el motivo.

También lista qué páginas cargan cada hoja de estilo. Agrega --json para todos los datos.

Clasifica tú mismo los que "vale la pena verlos". Antes de mostrar la lista, ordénalos según lo que puedas ver. Con una herramienta de navegador, mide su tamaño en la página. De lo contrario, lee el marcado. Mueve cada uno a bueno u omitir. No le envíes a la persona una lista de cosas que podrías haber revisado.

Luego muestra la lista, breve, una línea cada uno, en palabras simples, agrupados por página. Por ejemplo:

Encontré 6 fondos que podrían tener granulado:

1. Inicio, sección de tour: degradado oscuro que se desvanece
2. Inicio, héroe: resplandor radial oscuro
3. Sostenibilidad, encabezado: degradado verde-negro
4. Carreras, banda "hecho aquí": degradado naranja-negro

Omitiendo 12: botones, texto con degradado, superposiciones de fotos y patrones de rayas. La página de cotizaciones ya tiene granulado, pero en una cantidad que nadie puede ver, así que lo reharía.

Luego déjales elegir. Si tienes una herramienta de preguntas de opción múltiple (AskUserQuestion en Claude Code), úsala:

• Pregunta "¿Qué fondos deberían tener granulado?" con Todos ellos (Recomendado) primero.
• Hasta 3 elementos más, lista cada uno como opción con selección múltiple activada.
• Si hay más de 4, pregunta primero "¿Todos, o elegir?"; en "elegir", haz preguntas de selección múltiple de hasta 4 elementos cada una.

Sin la herramienta, pídeles que respondan con "todos" o los números.

3. Preguntar: antes/después, o ¿aplicar directamente?

Pregunta una vez, para todo lo seleccionado: "¿Quieres ver un antes y después primero, o debería aplicar directamente la mejor opción para cada uno?" Usa la herramienta de opción múltiple si la tienes, con Muéstrame primero (Recomendado) y Solo aplicar.

Las herramientas a continuación necesitan Node 22+ y un Chrome, Chromium, Edge o Brave en la máquina (se encuentra automáticamente; CHROME_PATH lo anula). Abren las páginas en modo headless, por lo que el sitio debe ser accesible: un servidor de desarrollo en ejecución, una URL de staging, o file:// para HTML plano. No se agrega nada al sitio.

4. Mostrar el antes/después

Muéstrame primero: la página de revisión

Ejecútalo en segundo plano (espera a la persona) con una --url por página y los selectores de esa página después:

node <skill>/scripts/review.mjs --url http://localhost:3000/ --selector ".hero" --selector ".footer-band" \
                                --url http://localhost:3000/about --selector ".about-header"

• Toma las fotos él mismo. Para cada fondo, fotografía la página tal como está y con cada opción, además de lo que obtienen las pantallas HDR y la configuración de alto contraste. Esto toma entre 10 y 30 segundos por página.
• Luego abre una página de revisión local en su navegador e imprime su dirección; dales el enlace también.
• Cada fondo obtiene una tarjeta con:
  • un control deslizante de antes/después
  • Zoom en bandas, que magnifica el área que más bandas tiene (el granulado fino es invisible en una imagen reducida)
  • las opciones como pestañas, con la recomendada marcada con estrella
  • un interruptor de pantalla
  • los números medidos, y un "Por qué" con el informe
• "Listo, enviar mis selecciones" envía las selecciones directamente. Sin copiar y pegar.

Diles en una línea qué hacer: "Arrastra sobre cada imagen, prueba Zoom, elige uno por fondo, luego presiona Listo." Cuando el comando termine, su salida tendrá las selecciones, el CSS para cada fondo y una carpeta de referencia por fondo para la verificación en el paso 7.

También muestra una imagen en el chat. Cada carpeta de referencia tiene compare-<opcion>.png:

• antes/después completo
• un detalle ampliado
• el mismo detalle con su contraste estirado, para que las bandas se muestren como rayas y el granulado como ruido
• los números medidos

Envía la opción recomendada a la persona (con una herramienta de envío de archivos si la tienes; de lo contrario, da la ruta). Es la evidencia de que el cambio es real.

Solo aplicar

Toma la referencia y las fotos primero, para que el resultado pueda ser verificado y mostrado:

node <skill>/scripts/shoot.mjs --url http://localhost:3000/ --selector ".hero" --option recommended --out ./grain-shots

Imprime una línea por imagen (granulado, brillo, ancho de banda) y escribe <out>/<selector>/ con report.json (el informe, el CSS para cada opción, la recomendada) y compare-<opcion>.png. Usa el CSS recomendado de report.json.

Sin Chrome, o el sitio no se puede alcanzar en modo headless

Alternativa a la vista previa en la página: copia dist/grain-page.js junto a los scripts propios del sitio (verifica que se cargue, 200 no 404), agrega <script src="/js/grain-page.js" data-grain=".hero | .footer" defer></script>, y pídeles que abran la página con ?grain. Muestra las mismas opciones con un controlador arrastrable en la página real; Copiar selecciones copia grain: <opcion> + el aspecto de cada fondo, que diriges a node <skill>/scripts/grain.js --look - para el CSS. Elimina la etiqueta y el archivo después.

Sin ningún navegador, escribe tú mismo el aspecto y ejecuta grain.js sobre él:

{ "selector": ".hero", "kind": "gradient", "shape": "linear",
  "colours": [{ "colour": "#323435", "pos": 0 }, { "colour": "#141617", "pos": 1 }],
  "lengthPx": 900, "background": "linear-gradient(...)", "behind": "#ffffff",
  "solidBase": true, "position": "relative", "freePseudo": "::after", "moves": null }

o node grain.js --colours "#323435,#2a2c2d@24%,#141617" --length 900 --selector ".hero" [--shape radial] [--fade-over "#fff"] [--option even].

Lo que decide el motor, para que tú no tengas que hacerlo

Situación	Lo que hace
Degradado o color sólido en un elemento	Una capa: el ruido se convierte en la capa superior de fondo del elemento (background-blend-mode), mantenida en una propiedad personalizada --grain. Se agrega un valor a cada lista de fondo, por lo que se conservan los tamaños, posiciones y mezclas propios de la página. No puede cubrir texto.
El fondo se desvanece	La misma capa, por lo que el granulado se desvanece con él. El informe da el granulado en cada etapa del desvanecimiento.
Degradado transparente sin nada sólido debajo	Su propia capa (un ::after/::before libre, o un elemento hijo) para que se mezcle con lo que se ve a través en lugar de volverse gris.
Fondo de foto o imagen	Un pseudo-elemento libre, o un elemento hijo si ambos están ocupados.
<img>/<video> llenando el elemento, o un fondo en un pseudo-elemento	Un elemento hijo con z-index: -1 en un host aislado.
Negro puro o blanco	La superposición y soft-light no pueden agregar granulado allí, por lo que usa screen o multiply con un pequeño cambio de brillo, y lo indica.
Granulado desigual a través del degradado	Recomienda Even (Uniforme), si Even es claramente más uniforme. Even se oculta cuando sería igual que Medium (Medio).
Alto riesgo de bandas	Dice si el granulado elegido rompe las rayas. Strong (Fuerte) lo hace más.
Capa de ruido antigua en el mismo fondo	La reemplaza. Si el ruido antiguo está en otro lugar (un pseudo-elemento), dice que lo elimines.
Parte del fondo dibujada en una escena WebGL/canvas (un suelo 3D, un fondo de sombreador)	El CSS de granulado detrás del canvas no puede alcanzarlo, por lo que la parte del canvas se ve suave o manchada junto al cielo granulado. Tú lo agregas: en el sombreador de fragmentos de ese material, después de la conversión de espacio de color, soft-light el mismo mosaico de ruido en espacio de pantalla (gl_FragCoord.xy / tilePx, tile = 200 × relación de píxeles del renderizador). Lee el mosaico y la cantidad de la propiedad personalizada --grain de la página, para que las cantidades de teléfono, HDR y alto contraste se transfieran, y vuelve a leerla al cambiar el tamaño. Mide renderizando un fotograma y leyendo los píxeles.
Pantallas HDR, alto contraste, impresión	@media (dynamic-range: high) y @media (prefers-contrast: more) vuelven a resolver la cantidad para esas pantallas, con la misma mezcla. @media print la desactiva. Se omite una regla que daría el mismo resultado.

Los colores se ponderan según la cantidad de degradado que cubren. Un resalte fino no cuenta tanto como el área oscura grande, por lo que las versiones de teléfono y escritorio de la misma sección reciben el mismo tratamiento.

5. Aplicar

• Coloca cada bloque CSS donde esté definido ese fondo, con su comentario.
• Mantén la expresión de fondo propia del proyecto. El motor trabaja a partir de valores calculados, por lo que vuelve a poner var(--slate) o el linear-gradient(...) original donde la salida repite un degradado resuelto largo.
• Haz cada versión de cada fondo (teléfono, modo oscuro). El CSS de una capa va en el mismo selector dentro de la misma consulta de medios. Mide cada versión con --phone o --colours si difiere.
• Método hijo: agrega el <div class="grain-layer" aria-hidden="true"></div> donde lo indique el comentario (en un componente, en su marcado).
• Usa una propiedad personalizada para una URL de ruido repetida. Si varias reglas usan la misma, defínela una vez.
• Si el informe lista "Desvanecimientos encima", dale a cada uno el mismo granulado que se describe allí, o se bandeará nuevamente donde es más oscuro.
• Elimina cualquier cosa temporal (una etiqueta de vista previa, grain-page.js).

6. Verificar, cada vez

Antes de decir que está listo, verifica cada fondo con su referencia:

node <skill>/scripts/check.mjs --url http://localhost:3000/ --selector ".hero" --baseline <carpeta de referencia> [--option even]

Fotografía la página nuevamente e imprime PASS/FAIL para cada uno de estos:

• La capa de granulado está en la página (el CSS se cargó y está en el selector correcto).
• No hay nuevos errores en la página.
• El granulado está cerca de la cantidad esperada.
• El brillo no se movió.
• Las rayas se estrecharon.
• Nada fuera del fondo cambió.
• Ningún elemento se movió o cambió de tamaño.

Escribe check.png, antes vs ahora. Ante cualquier FAIL, arréglalo y vuelve a ejecutar la verificación; no informes éxito sobre un fallo. Si un FAIL no se puede arreglar, dile a la persona exactamente qué verificación falló y por qué.

7. Informe

Una o dos oraciones por fondo, o una lista corta para todo un sitio: qué es, qué se eligió y por qué. Agrega el resultado medido de la verificación (por ejemplo "granulado 0.83 L*, rayas 80px → 0.7px, nada más cambió") y envía check.png o la imagen compare. Di una vez que el granulado se adapta a las pantallas HDR y a la configuración de alto contraste y se desactiva en la impresión. Si el informe dice que un objetivo no está confirmado a simple vista para ese tipo de fondo, dilo brevemente.

Ajustar después

• "Demasiado" o "no puedo verlo": sube o baja un nivel.