Como fazer um vídeo de um site: rolando a página automaticamente

Abra a página, abra o DevTools (F12, ou ⌥ ⌘ I no Mac), cole isto no Console e aperte Enter. O script espera três segundos para você iniciar o gravador e depois rola de cima a baixo numa curva ease-in-out, no tempo que você definir.

const SECONDS = 20;        // quanto tempo a rolagem leva
const WAIT = 3;            // tempo para iniciar o gravador

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' faz diferença. Muitos sites definem scroll-behavior: smooth, que transforma cada pequeno movimento do script numa animação própria e traz os trancos de volta.
• requestAnimationFrame move a página uma vez por quadro exibido, então a rolagem fica tão uniforme quanto a tela permite.
• Antes de rodar, role até o fim e volte uma vez à mão, para as imagens com carregamento lento já estarem no lugar e a altura da página não mudar no meio da tomada.
• Sites feitos com uma biblioteca de rolagem suave, como Lenis ou Locomotive Scroll, cuidam da rolagem por conta própria e podem brigar com o script. Se a página der solavancos, o motivo é esse.

Com um script, a taxa de quadros ainda fica por conta do gravador e da sua máquina. Um renderizador tira os dois da equação: o Website Scroll Video lê a página inteira uma vez e calcula onde ela deve estar em cada quadro de um vídeo a 24, 30 ou 60 fps fixos, então uma página pesada não perde quadros e uma longa não sai do compasso. Você define as mesmas coisas que no script, em segundos e por curva, e vê a prévia do resultado antes de gastar qualquer coisa.

Meça a página em telas: a altura total dividida pela altura da janela. Uma landing page típica tem de cinco a oito telas. Depois:

Mais rápido que uma tela por segundo, o texto vira um borrão, principalmente a 30 fps ou num GIF. Mais devagar que três segundos por tela, o público se dispersa. Quando uma seção importa mais que as outras, uma pausa nela funciona melhor do que desacelerar a página inteira; o Website Scroll Video permite até 6, de 0,5 a 5 segundos cada.

• Suave (ease-in-out). Sai do repouso, mantém o ritmo e volta ao repouso. O padrão certo: as duas pontas parecem intencionais, não cortadas.
• Deslizante (ease-out). Sai rápido e vai parando aos poucos, como um toque rápido no trackpad. Boa para teasers curtos que devem abrir com energia.
• Linear. Uma velocidade só do começo ao fim. A melhor para um loop de fundo, em que qualquer mudança de ritmo chama a atenção.
• Pulso. Avança uma seção, assenta, avança de novo. Parece alguém folheando o site, o que combina com tours de produto.

Um vídeo que rola para baixo e depois corta de volta para o topo dá um salto visível quando recomeça. Em vez disso, role para baixo e de volta para cima pela mesma curva: o último quadro coincide com o primeiro e o loop fica contínuo. No Website Scroll Video, isso é a Reprodução Descer e voltar, com uma espera opcional no fim antes da volta e no topo antes de o loop recomeçar.