Capacidad C23 · Nivel 3

El fondo se mueve. El mensaje no está dentro de él.

Un solo canvas con un shader animado, y el titular, el texto y el botón viviendo en el DOM encima. Es el patrón que medimos en Unseen Studio — y la razón por la que Google sigue leyendo esta página entera.

Tocar los números comprobando WebGL…

Qué tienes que mirar

  1. El fondo del hero se mueve solo, despacio. No es un vídeo: es un shader dibujando cada fotograma.
  2. Selecciona el titular con el ratón. Se selecciona como texto normal — porque es texto normal. En Lusion o Resn no podrías.
  3. Busca una palabra con Ctrl+F, por ejemplo "mensaje". La encuentra. Eso es lo que también encuentra Google.
  4. Abajo tienes los cuatro números del shader en vivo. Muévelos y mira el hero.
  5. La prueba de la reserva: el estado junto al botón dice si el shader arrancó. Si tu navegador no tuviera WebGL, verías un degradado fijo y el hero seguiría igual de legible.
Los cuatro números — decides tú

Cuánto se mueve. En un hero de cliente, lento casi siempre gana: el fondo acompaña, no compite.

Cuánto se enrollan los colores entre sí.

Cuánto se deforman las manchas de color.

Textura fina encima. Un poco de grano quita el aspecto de degradado digital plano.

Por qué esto sí puede ir a una web de cliente

  • El contenido está en el DOM. Titular, texto y botón son HTML. El canvas es aria-hidden y no contiene información.
  • La reserva está siempre puesta, no solo cuando falla: el degradado CSS es el fondo por defecto y el shader se pinta encima. Si no arranca, no hay hueco.
  • Hay un velo de contraste sobre el fondo animado. Sin él, la legibilidad del titular dependería de en qué punto esté la animación — que es justo la crítica que recibió el Liquid Glass de Apple.
  • Con prefers-reduced-motion el shader ni se carga. No se oculta después: no se pide.
  • Peso: ~3 KB y cero dependencias. El shader está escrito a mano en este archivo. La librería que el catálogo asignaba a esta capacidad pesaba 37,3 KB en su recorte mínimo. Ver README §4.