Crear un vídeo de una web: cómo hacer scroll automático

Abre la página, abre DevTools (F12, o ⌥ ⌘ I en un Mac), pega esto en la Consola y pulsa Enter. Espera tres segundos para que puedas iniciar el grabador y luego desplaza la página de arriba abajo siguiendo una curva ease-in-out durante el tiempo que indiques.

const SECONDS = 20;        // cuánto dura el scroll
const WAIT = 3;            // tiempo para iniciar el grabador

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto' es importante. Muchas webs usan scroll-behavior: smooth, que convierte cada pequeño movimiento del script en una animación propia y devuelve de golpe los tirones.
• requestAnimationFrame mueve la página una vez por cada fotograma mostrado, así que el scroll es todo lo uniforme que permite la pantalla.
• Baja hasta el final y vuelve arriba una vez a mano antes de ejecutarlo, para que las imágenes de carga diferida ya estén en su sitio y la altura de la página no cambie a mitad de toma.
• Las webs hechas con una librería de scroll suave como Lenis o Locomotive Scroll gestionan el scroll por su cuenta y pueden chocar con el script. Si la página da bandazos, es por eso.

Un script sigue dejando la frecuencia de fotogramas en manos de tu grabador y de tu ordenador. Un renderizador se libra de ambos: Website Scroll Video lee toda la página una vez y luego calcula dónde debe estar en cada fotograma de un vídeo a una frecuencia fija de 24, 30 o 60 fps, así que una página pesada no puede perder fotogramas y una larga no puede desfasarse. Ajustas lo mismo que en el script, en segundos y por curva, y ves la vista previa antes de gastar nada.

Mide la página en pantallas: su altura total dividida entre la altura de la ventana. Una landing page típica tiene de cinco a ocho pantallas. Después:

A más de una pantalla por segundo el texto se emborrona, sobre todo a 30 fps o en un GIF. Con más de tres segundos por pantalla, el espectador se distrae. Cuando una sección importa más que el resto, una pausa en ella funciona mejor que ralentizar toda la página; Website Scroll Video admite hasta 6, de entre 0,5 y 5 segundos cada una.

• Suave (ease-in-out). Arranca desde parado, avanza a velocidad de crucero y se detiene. La mejor opción por defecto: los dos extremos parecen intencionados, no cortados.
• Deslizado (ease-out). Sale rápido y se detiene poco a poco, como un gesto rápido en un trackpad. Bueno para adelantos cortos que deben empezar con energía.
• Lineal. Una sola velocidad de principio a fin. Lo mejor para un bucle de fondo, donde cualquier cambio de ritmo llama la atención.
• Pulso. Avanza una sección, se asienta, vuelve a avanzar. Parece alguien que va recorriendo la web por partes, algo que encaja con los recorridos de producto.

Un vídeo que baja y luego corta de vuelta arriba tiene un salto visible al repetirse. En su lugar, baja y vuelve a subir por la misma curva: el último fotograma coincide con el primero y el bucle no tiene costuras. En Website Scroll Video es la Reproducción Bajar y volver, con un descanso opcional abajo antes de volver y otro arriba antes de que el bucle empiece de nuevo.