Como gravar vídeos de rolagem fluidos para templates do Framer

1. 1

   Publique num endereço público

   Publique o template, ou a demo dele, no endereço .framer.website ou num domínio próprio. Ele precisa abrir numa janela anônima sem senha.

2. 2

   Cole a URL e escolha Captura ao vivo

   Cole o endereço na página inicial. Em Motor, escolha Captura ao vivo. Ela fotografa a página em cada posição da rolagem em vez de percorrer uma imagem parada, então os efeitos de entrada, as transformações na rolagem e as seções fixas tocam exatamente como no navegador.

3. 3

   Defina o ritmo

   De doze a vinte segundos funcionam para a maioria das páginas iniciais de templates. Suave é o movimento seguro; Pulso avança seção por seção e assenta em cada uma, o que valoriza a estrutura do template.

4. 4

   Pause no que vende

   Clique na página onde a rolagem deve parar: o hero, a grade bento ou de recursos, os depoimentos, os preços. São até 6 pausas, de 0,5 a 5 segundos cada. Ative «Ida e volta» se o vídeo rolar de volta para cima.

5. 5

   Mostre os estados de hover

   Ative o cursor, adicione um hover e clique no card ou botão em que ele deve parar. O cursor vai até lá, o efeito de hover toca e ele fica parado de 0,5 a 5 segundos antes de seguir. São oito estilos de cursor, do macOS a um ponto simples.

6. 6

   Exporte as versões de que você precisa

   Um MP4 16:9 em 1080p ou 1440p para a página do template; depois mude o dispositivo para Celular e exporte uma versão 9:16 ou 4:5 do layout de celular para o X, o Instagram ou o TikTok.

O Deslocamento estático lê a página uma vez e desliza um enquadramento por ela, de cima a baixo. É rápido e perfeitamente uniforme, mas tudo o que anima na rolagem fica congelado no estado em que estava quando a página foi lida. Ative «Assentar animações» e os efeitos de entrada são levados antes até o estado final, para nada ficar pego no meio do fade. A Captura ao vivo toca os efeitos de verdade. A renderização demora bem mais e soma 13 créditos à exportação.

• Use Captura ao vivo quando o movimento faz parte do que você está vendendo, o que vale para a maioria dos templates do Framer.
• Use Deslocamento estático com «Assentar animações» para rascunhos rápidos, para páginas cujas animações são só de entrada ou para a versão de celular, em que o espaço na tela é apertado.

• Uma moldura de navegador. Safari ou Chrome, clara ou escura, para a prévia ser reconhecida como um site num relance.
• Um fundo. Margem em volta da janela com uma cor, um gradiente ou um dos 36 fundos prontos. Cantos arredondados e uma sombra suave dão cara de foto de produto, não de captura de tela.
• Claro e escuro. Se o template segue o tema do sistema, force Claro ou Escuro em Esquema de cores e exporte uma versão de cada.
• Um primeiro quadro limpo. Segure um segundo no hero antes de a rolagem começar. Marketplaces e apps de redes sociais costumam usar o primeiro quadro como miniatura.