Capacidad C28 · Nivel 3

Vídeo con máscara de texto

El vídeo se ve solo dentro de las letras. Y el titular sigue siendo un <h2> normal: se selecciona, se busca con Ctrl+F y Google lo lee.

El oficio se ve antes de explicarse

Degradado abstracto generado con ffmpeg — 100 KB, 9 s, en bucle y sin sonido. En un proyecto real, aquí va material propio de alto contraste.

Por qué no se hace con canvas

  • La versión obvia dibuja el texto en un <canvas> junto con los fotogramas. Se ve idéntica.
  • Y rompe cuatro cosas a la vez: el texto deja de poder seleccionarse, Ctrl+F no lo encuentra, Google no lo lee y un lector de pantalla tampoco.
  • En un titular eso es lo peor que puede pasar, porque el titular es justo donde vive el mensaje que vende.
Es la misma trampa que C24 existe para evitar, pero al revés: allí la capa visual se come el contenido y se repone con una reserva. Aquí no hace falta reserva ninguna — basta con no quitarlo.

Cómo funciona, en tres capas

  • 1 · El vídeo, al fondo, en object-fit: cover.
  • 2 · El titular, en blanco.
  • 3 · Una capa del color del fondo con mix-blend-mode: multiply.

Multiply se queda con lo más oscuro de las dos capas: donde la capa es verde profundo, gana el verde; donde el texto es blanco, pasa el vídeo.

~12 líneas de CSS. Cero JavaScript y cero dependencias.
Y con dos reservas puestas: si el navegador no soporta la mezcla, o si el visitante pidió menos movimiento, el titular se ve en crema sobre verde y no falta nada.
Qué tienes que mirar

Cuatro cosas

  1. El vídeo se mueve dentro de las letras, y solo dentro de ellas.
  2. Selecciona el titular con el ratón. Se selecciona — es texto de verdad.
  3. Busca oficio con Ctrl+F. Lo encuentra y te lo resalta encima del vídeo.
  4. Es un titular largo a propósito. El efecto tiene que aguantar una frase, no solo una palabra suelta: es lo que separa una demo de una capacidad.