making-a-page-reel

Criando um Page Reel

Visão Geral

A página já contém a melhor filmagem que você obterá: seu próprio movimento, executado de verdade. O trabalho é capturá-lo fielmente, escolher o caminho através dele e comprovar o resultado.

Princípio central: grave a animação real, nunca a recrie, e edite por medição, não por sensibilidade.

Uma gravação de uma página é um passo a passo. Diga isso. Um filme de marca é um trabalho diferente: um filme animado e projetado com um storyboard. Esta skill é para "aqui está como a página que construímos se parece e se move".

Decida antes de gravar

• O que o reel prova. Uma frase. "A nova página se constrói sozinha e rola conforme o planejado."
• Qual versão. Grave a versão que é real e publicada em um ambiente de revisão. Nunca uma versão que ainda não foi publicada (uma página de produto não anunciada, um rascunho), e nunca um protótipo que ainda está em meio a alterações. Grave o staging, não uma compilação local.
• Formato. 16:9 a 1920x1080 é a captura nativa de desktop e a mais segura. Não invente um layout retrato que a equipe não tenha testado.
• Duração. Curta. 15 a 20 segundos mostram a capacidade de uma página inteira. Cinco segundos mostram um movimento. Decida qual a duração que o reel precisa.
• O que não deve aparecer. Logotipos de clientes, citações com nomes, marcas de terceiros, texto placeholder, imagens quebradas, alegações não publicadas. Anote a lista agora.
• Resolução. Revise em 1080p. Não renderize um master 4K até que o corte seja aprovado.

Etapa 1: grave a animação real

Use Chrome com um screencast CDP, não uma captura de tela por quadro. As animações GSAP com rolagem suave, rolagem suave, rastros de canvas e introduções temporizadas são executadas em tempo real. Avançá-las quadro a quadro muda o movimento.

Page.startScreencast  format jpeg, quality 100, maxWidth = viewport width, everyNthFrame 1

Em um laptop Apple Silicon, isso entrega cerca de 60 quadros por segundo (mediana de intervalo 16,7 ms).

• Introduções no carregamento: inicie o screencast e recarregue a página, para que a introdução esteja na gravação. Corte os quadros antes do recarregamento.
• Rolagem: conduza a rolagem a partir de keyframes [segundos, posição]. Passe as posições através de uma cúbica monotônica (sem ultrapassagem, pausas permanecem planas) e aplique cada valor com a biblioteca de rolagem suave scrollTo(y, { immediate: true, force: true }), para que a própria depuração e suavização da página sejam executadas exatamente como para um leitor. Nunca anime manualmente os elementos da página.
• Oculte, não remova: visibility: hidden em logotipos e citações mantém os layouts fixados intactos. display: none os desloca.
• Relógio: obtenha o tempo de início dentro da página (performance.timeOrigin + performance.now()) para que os keyframes de rolagem e os timestamps do screencast compartilhem um relógio.
• Reamostragem para uma taxa de quadros constante: o quadro de saída k mostra o quadro mais recente do screencast em ou antes de k / fps.

video/capture.mjs neste repositório faz tudo isso a partir de um pequeno plano JSON.

Etapa 2: escolha o caminho por medição

Um caminho de rolagem escolhido por sensação deixa zonas mortas, trechos onde a roda se move e nada na tela muda. Encontre-os:

1. Grave uma varredura lenta e constante de todo o intervalo.
2. Execute video/analyze.py nela. Ele relata congelamentos (quadros idênticos) e as maiores mudanças entre quadros.
3. Mapeie os congelamentos de volta para as posições de rolagem. Essas são zonas mortas: atravesse-as rapidamente.
4. Dê aos momentos com depuração por rolagem (um círculo crescendo, um cartão se construindo, um contador contando) os trechos lentos e legíveis. Cenas com depuração acompanham a rolagem, então esperar não as finaliza.
5. Animações baseadas em tempo começam quando um limite é ultrapassado e precisam de tempo real para terminar. Não encerre o clipe até que a última tenha terminado.

Em seguida, grave a tomada real com o caminho moldado e execute analyze.py novamente. Um curto congelamento dentro de uma cena fixada é uma pausa e está tudo bem. Um congelamento de 0,4 s no meio de um movimento rápido não está.

Verifique a saúde da própria captura: o intervalo máximo entre quadros do screencast dentro da parte que você usará deve ser inferior a cerca de 40 ms. Um intervalo maior é uma falha, então regrave.

Etapa 3: selecione filmagens que estejam completas

Olhe para uma folha de contato a cada 0,5 a 1 s antes de se comprometer. Rejeite:

• cartões vazios, imagens quebradas, texto alternativo mostrando onde uma imagem deveria estar
• texto placeholder em uma lista CMS
• um primeiro segundo que está em branco enquanto a página renderiza; corte até onde o título começa a surgir
• qualquer coisa na lista "não deve aparecer"

Se uma seção estiver incompleta, deixe-a de fora e avise o proprietário. Um reel que apresenta um cartão quebrado é um relatório de bug público.

Etapa 4: codifique com as cores marcadas

./encode.sh <framesDir> out.mp4 <firstFrame> <frameCount> 60

Os quadros do screencast são JPEG BT.601 de faixa completa. A codificação os converte para BT.709 de faixa limitada e marca o fluxo, para que os players não adivinhem:

scale=in_range=full:in_color_matrix=bt601:out_range=tv:out_color_matrix=bt709,format=yuv420p
libx264 -crf 14 -preset slow -x264-params colorprim=bt709:transfer=bt709:colormatrix=bt709:fullrange=off
-movflags +faststart

yuv420p e +faststart fazem com que seja reproduzido em qualquer lugar e iniciado imediatamente. Verifique o resultado decodificando alguns quadros e comparando-os com as fontes pixel por pixel. Não compare médias de canais: calcular a média de alguns milhões de valores float32 acumula erro suficiente para inventar uma tonalidade de cor que não existe. Dentro de cerca de 3 níveis por canal é fiel.

Etapa 5: faça o QA do vídeo

• Duração, taxa de quadros, tamanho e tags de cor lidos do arquivo
• Um quadro a cada segundo, observado, além das transições em velocidade normal
• Nenhum logotipo, nome, placeholder, banner ou imagem quebrada em nenhum quadro, não apenas nos escolhidos
• Nenhum banner de cookies ou widget de consentimento no quadro, e nenhum clicado: oculte-o do CSS da própria página ou grave um ambiente que não o exiba
• O primeiro quadro é o gancho. Se a página renderizar em branco, corte-o
• Escolha um quadro de pôster onde a página esteja completa e parada, não no meio da rolagem

Em seguida, execute o gate de revisor frio de reviewing-page-design.

Etapa 6: diga o que você não pôde verificar

Som, se houver ("Não consigo ouvi-lo"). A própria recompressão da plataforma. Qualquer coisa exibida em um dispositivo que você não testou.

Quando um reel projetado é desejado

Componha a filmagem da página dentro de um layout onde cada visual seja uma função do tempo (molas de forma fechada, uma ideia de sobreposição por batida, legendas de duas a cinco palavras, cor da marca apenas no nome e no cartão final). As mesmas regras se aplicam: a janela da página nunca é coberta, o texto é legível com 360 px de largura, os payoffs duram pelo menos 1,2 s.

Bandeiras vermelhas

• Uma captura de tela por quadro de uma página com rolagem
• Gravar um protótipo que está em meio a alterações, ou uma página que não foi publicada
• Um reel que inclui uma seção meio acabada
• Logotipos de clientes ou citações com nomes no quadro
• Um caminho de rolagem escolhido por sensação, sem uma varredura por trás
• Cor comparada por médias de canal
• Renderizar 4K antes do corte ser aprovado