Un portafolio 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.
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.
