El día en que una web aprendió a grabarse

Todo producto con web necesita vídeo. Una demo para la página de inicio, un clip corto para redes, un recorrido para un lanzamiento, un fragmento para la presentación comercial. Cada uno pide la misma tarde: un grabador de pantalla, un guion, una voz, un editor y mucha paciencia.

Luego el sitio cambia. Una tabla de precios nueva, una función con otro nombre, una imagen de portada distinta, y el vídeo empieza a contar en silencio una historia diferente de la página que debería mostrar.

Nos rondaba siempre la misma pregunta. Si la web ya contiene la verdad sobre el producto, ¿por qué el vídeo tiene que hacerse en otra parte?

PageToVid parte de una promesa sencilla. El vídeo sale del sitio real, no de una maqueta. Sin imágenes de archivo que se hacen pasar por tu producto, sin diapositivas rehechas a mano, sin nada que instalar. Si la página lo dice, el vídeo lo muestra.

Esa promesa exige tres cosas a la vez:

• Un navegador real. El sitio se abre, se recorre y se graba en nuestros servidores tal como lo ve un visitante, así que cada captura es nítida y repetible.
• Una historia, no un scroll. Una IA lee primero la página y decide qué merece la pena contar: qué es el producto, para quién es y qué promete.
• Una voz y un formato. El vídeo se narra, se subtitula y se encuadra para el lugar donde se verá: una pantalla ancha, un móvil o un feed cuadrado.

El campo de la página de inicio parece casi demasiado simple. Detrás de él, cinco pasos se pasan el trabajo uno a otro:

1. 1Leer. Un navegador abre la página, recoge su texto, sus enlaces, sus colores y una captura, y un modelo de IA escribe un breve resumen del producto.
2. 2Planificar. Una segunda pasada convierte ese resumen en escenas: qué dice la voz, qué parte de la página mostrar y qué tipo de plano usar.
3. 3Grabar. Un navegador real interpreta cada escena en el sitio en directo, se desplaza, pasa el cursor y hace clic, y captura pantallas nítidas de alta densidad y clips cortos de movimiento.
4. 4Narrar. Una voz con IA lee el guion, y cada palabra se alinea con el audio para que los subtítulos se iluminen justo cuando se pronuncia.
5. 5Renderizar. Remotion, un motor de vídeo construido sobre React, une pantallas, clips, animaciones, música y subtítulos en el vídeo final.

Una decisión tomada desde el principio importa más de lo que parece. Las pantallas nítidas salen de capturas de alta resolución que el motor anima, y el vídeo real se reserva para los momentos que piden movimiento, como pasar el cursor o hacer clic. Por eso el texto de un vídeo de PageToVid se lee bien, incluso en un móvil pequeño.

La idea llevaba una semana tomando forma en un portátil con un nombre provisional. El 23 de junio pasó a llamarse PageToVid y recibió lo que necesita un producto de verdad: un contenedor con el navegador, las herramientas de vídeo y el motor de render, cabeceras de seguridad y de caché, y una cadena automática que comprueba, compila y publica cada cambio en la nube.

En su primer día ya funcionaba en público. Llegó el inicio de sesión y la página de inicio se redujo a una sola línea: pega una URL y pulsa Intro. Muy pronto esa línea empezó a hacer primero una pregunta, el formato del vídeo, con tres tarjetas para 16:9, 9:16 y 1:1, porque el formato cambia todo lo que hace el grabador.

Los primeros vídeos se podían ver. Queríamos algo más que eso, así que los vimos como los vería cualquiera, en un móvil y a velocidad real, y ajustamos lo que encontramos.

• Un desplazamiento tranquilo. El scroll avanza ahora a velocidad constante, medida en alturas de pantalla por segundo, así una escena corta se desliza con la misma calma que una larga, sea cual sea la longitud de la página.
• El diseño móvil de verdad. Un vídeo 9:16 se graba con un ancho real de teléfono y alta densidad de píxeles, para que el sitio muestre el diseño que ven de verdad sus visitantes móviles.
• Una voz que respira. La narración va un poco más despacio, sin cambiar su tono, y cada escena y cada subtítulo siguen su ritmo.
• Subtítulos con espacio. Las escenas gráficas dejan una franja libre abajo siempre que hay subtítulos, para que textos y cifras nunca queden debajo.

Esos primeros renders nos dejaron el hábito que queremos conservar: renderizar un sitio real, ver el vídeo de cerca, encontrar lo único que rompe la magia y corregir su causa, no su síntoma.

Este blog seguirá a PageToVid hito a hito, desde este primer campo hasta lo que llegue a ser, con palabras sencillas y en cuatro idiomas. Si quieres ver este primer capítulo con tus propios ojos, pega tu sitio en PageToVid o echa un vistazo a las funciones.