Un portfolio se juega la credibilidad en las imágenes. Los mockups de escritorio flotando en 3D quedan bonitos pero no demuestran nada. Nosotros queríamos enseñar las webs funcionando de verdad, así que las grabamos.
La idea
Para cada caso de éxito hay un marco de navegador que reproduce un vídeo real del sitio desplazándose solo. No es una captura estática con un truco de CSS: es la web renderizada y grabada, con su tipografía, sus animaciones y su contenido reales.
brokenufo.com En vivo El pipeline
Usamos Playwright con Chromium headless. El flujo por sitio: abrir la página, esperar a que cargue todo, hacer un scroll suave y programado de arriba abajo mientras se graba, y guardar el vídeo. Después transcodificamos a un WebM ligero (VP8) para que pese poco y cargue instantáneo.
const ctx = await browser.newContext({
viewport: { width: 1920, height: 1080 },
recordVideo: { dir: 'out/', size: { width: 1920, height: 1080 } },
});
const page = await ctx.newPage();
await page.goto(url, { waitUntil: 'load' });
// cerrar el banner de cookies para que no tape la web
await dismissCookies(page);
await smoothScrollToBottom(page, 14_000); // 14 s de recorrido
await ctx.close(); // Playwright vuelca el vídeo al cerrar1) Grabar a 1920×1080: por debajo, las webs responsive colapsan a su versión móvil y no lucen. 2) Cerrar el banner de cookies antes de grabar, o te comes medio vídeo con un overlay tapando el contenido.
Lo que aprendimos
- El scroll tiene que ir con easing, no a saltos: un recorrido lineal se nota robótico.
- Los sitios con muchísimo JS (portales de juegos, por ejemplo) pueden tumbar el headless; conviene un timeout y un plan B.
- Un póster (primer frame) como imagen de respaldo hace que el marco no aparezca en negro mientras carga el vídeo.
El resultado: un portafolio donde cada proyecto se demuestra en lugar de contarse. Y un script reutilizable que reejecutamos cada vez que un cliente actualiza su web.
Grabar dos veces lo mismo tiene que dar lo mismo
Un vídeo que sale distinto en cada ejecución no sirve como pieza de portafolio: no puedes rehacer uno solo cuando el cliente actualiza su web sin que desentone con los demás. Hay tres fuentes de variación, y las tres se cierran antes de grabar.
- Las tipografías web. Si el vídeo empieza antes de que carguen, los primeros segundos salen con la fuente de respaldo y el texto salta. Se espera a que la carga de fuentes esté resuelta, no solo a que la página esté cargada.
- Las animaciones de entrada. Casi todas las webs modernas revelan bloques al hacer scroll. Si el barrido es más rápido que la animación, se graba el estado intermedio. Se baja el ritmo del barrido hasta que la web va por delante, no al revés.
- Los carruseles automáticos y los vídeos incrustados. Se congelan antes de grabar, o cada toma sale con un fotograma distinto.
Por qué el barrido se hace con requestAnimationFrame
La forma obvia de recorrer una página es window.scrollBy dentro de un bucle con pausas. Sale mal: el desplazamiento va a saltos del tamaño del paso y se nota robótico en el vídeo. La forma que funciona es animar la posición con requestAnimationFrame y una curva de aceleración, de modo que el movimiento arranque despacio, se estabilice y frene al final.
El detalle que se pasa por alto: hay que fijar el ritmo de captura y ajustar el recorrido a él. Si la grabación va a treinta fotogramas por segundo y el barrido avanza en función del tiempo real, cualquier tirón de la máquina que graba se convierte en un tirón en el vídeo final.
WebM ligero, un póster y ningún autoplay a ciegas
El vídeo se transcodifica a WebM. En una página de caso hay un vídeo por encima del pliegue y el objetivo es que pese menos que la captura estática a la que sustituye; a esa resolución y con este contenido —una web, con grandes zonas planas de color— el códec comprime muy bien.
Cada vídeo lleva su primer fotograma como póster, así que el marco del navegador nunca aparece en negro mientras carga. Y se reproduce en silencio, en bucle y sin controles, porque no es contenido que se consuma: es una ilustración en movimiento. Eso también significa que el texto que la acompaña tiene que contar lo mismo, para quien no puede verla.
Quien tenga activado prefers-reduced-motion no ve el recorrido: ve el póster, que es una captura real de la misma web. La información no se pierde, solo se queda quieta.
Lo que cuesta mantenerlo
Un pipeline así solo tiene sentido si se puede volver a ejecutar sin pensar. El guion es uno y la lista de sitios es un fichero; rehacer un caso concreto es una orden, y rehacer los dieciséis es la misma orden sin argumentos. Sin eso, el portafolio se queda congelado en el estado que tenían las webs el día que se grabaron, que es exactamente el problema que veníamos a resolver.
Es la misma idea que aplicamos al resto del sitio: si una tarea hay que repetirla, se automatiza aunque la primera vez cueste más que hacerla a mano.
