Como criar uma animação de sobrevoo de site 3D
Um sobrevoo de site transforma uma página longa em uma apresentação em movimento: a câmera percorre suas seções, destaca algumas mensagens e depois se afasta para revelar o design. Neste exemplo, três cards de texto se levantam quando a câmera se aproxima.
Para lançar um produto ou apresentar um portfólio, escolha três mensagens para destacar. O percurso da câmera conecta essas mensagens em uma apresentação curta; os cards elevados dão a cada uma seu momento de atenção.
1. Descreva a página e o movimento da câmera
Antes de começar, escolha o título de abertura, três mensagens curtas sobre funcionalidades e uma cor da marca. Inclua tudo no prompt para que a animação tenha conteúdo concreto para mostrar.
Abra o iArt no modo Animation e escolha uma tela 16:9. Use este briefing como ponto de partida, substituindo os textos entre colchetes pelos seus:
Crie um sobrevoo de site de 15 segundos para [nome do produto]. Desenhe uma landing page longa com o título “[título principal]” e três seções: “[funcionalidade um]”, “[funcionalidade dois]” e “[funcionalidade três]”. Use fundo branco, texto escuro e [cor da marca] como destaque.
Mova a câmera rente à página em uma única tomada contínua. Ao se aproximar de cada funcionalidade, levante o card de texto daquela seção pela borda inferior. Mantenha essa borda presa à página, mostre uma sombra sob o card e preserve a leitura do título. Deixe o card voltar à posição inicial quando a câmera passar.
Depois da terceira funcionalidade, eleve a câmera para revelar toda a página. Em seguida, volte ao título de abertura e mantenha o enquadramento até o final. Use movimento suave, sem cortes entre seções. Sem narração ou música.O percurso da câmera e o movimento dos cards são as partes essenciais do briefing. Confira esses dois requisitos na prévia antes de refinar as cores ou a decoração.
2. Faça a câmera percorrer um espaço contínuo
A inclinação da página estabelece a perspectiva. O avanço cria o sobrevoo: a câmera passa por novas seções da mesma página longa. A implementação usa uma câmera de perspectiva do Three.js, cuja projeção faz os objetos próximos parecerem maiores que os distantes. Consulte a implementação oficial e a documentação dos parâmetros da câmera do Three.js.
| Tempo | Movimento da câmera | O que verificar |
|---|---|---|
| 0–7,8 segundos | Voo baixo ao longo da página | Os três cards de texto recebem destaque em sequência. |
| 7,8–9,2 segundos | Subida acima da página | Os cards voltam à posição inicial enquanto o layout aparece. |
| 9,2–9,5 segundos | Breve vista de cima | A página longa inteira cabe no quadro. |
| 9,5–10,4 segundos | Retorno à seção de abertura | A câmera chega a uma composição final intencional. |
| 10,4–15 segundos | Pausa final | O título permanece legível. |
Mantenha a vista de cima breve e reserve mais tempo para ler o título final. Para outro design, decida o que o espectador deve perceber em cada parada antes de ajustar o ritmo.
3. Levante cada card pela borda inferior
A dobradiça determina como o card parece estar preso. Coloque o eixo de rotação na borda inferior e mantenha essa borda fixa na página. Girar o painel pelo centro também move sua base, fazendo-o parecer um objeto flutuante em vez de um card que se levanta.
Neste exemplo, cada card se levanta até 68 graus. Uma lateral fina visível e uma sombra projetada na página tornam a separação perceptível. A frente mantém luminosidade suficiente para que o título continue legível.
Sincronize cada elevação com a aproximação da câmera: o card se levanta ao virar o foco, permanece assim por um instante e volta à posição inicial quando a câmera passa. Limite cada card a uma mensagem curta para que seja possível lê-la durante a passagem.
4. Adapte o conteúdo antes de mudar a câmera
Na primeira variação, mantenha a estrutura da página e altere apenas o título principal, as três mensagens e a cor de destaque. Assim você terá uma edição específica para revisar. Mudar ao mesmo tempo o comprimento da página, as dimensões dos cards e o percurso da câmera dificulta identificar a causa de um problema de enquadramento.
Os três cards dizem “Describe. Or upload.”, “Change it by saying so.” e “Export. Then share.”. Cada um transmite uma mensagem, enquanto a página ao redor fornece contexto. Uma página de lançamento pode destacar três benefícios; um portfólio, três projetos. Escreva os novos textos antes de pedir a edição e mantenha os títulos curtos o bastante para serem lidos durante a passagem da câmera.
| Parte do exemplo | O que adaptar | O que verificar depois |
|---|---|---|
| Título de abertura e encerramento | O nome do produto e sua principal promessa. | O texto cabe e permanece legível durante a pausa final. |
| Três cards elevados | Três funcionalidades, projetos ou mensagens. | Nenhum título quebra de forma estranha ou desaparece atrás de outro elemento. |
| Cor de destaque | Uma cor da paleta da sua marca. | Texto e diagramas mantêm contraste com o fundo. |
| Visual da página | Seu design ou os recursos preparados do seu site. | A posição dos cards e o enquadramento continuam alinhados ao layout. |
Trocar o visual da página exige mais trabalho do que alterar o texto. Um design baseado em captura de tela precisa de camadas separadas para os cards que vão se levantar, alinhadas às respectivas posições na página.
5. Confira movimento, enquadramento e legibilidade
Pause em cada elevação de card, na vista de cima e no título final. Verifique se a borda inferior de cada card continua presa, se o título está voltado para a câmera e se a sombra cai sobre a página.
Depois reproduza a sequência inteira. Uma imagem estática convincente não revela se a câmera para de forma estranha, passa rápido demais por uma mensagem ou muda de direção bruscamente. Confira se há espaço suficiente ao redor do título na pausa final e se a página cabe na vista de cima.
| Problema visível | O que mudar |
|---|---|
| O resultado parece uma apresentação de slides. | Mantenha uma página em uma única cena e mova a câmera continuamente ao longo dela. |
| O card flutua para longe de sua seção. | Mantenha a borda inferior em uma posição fixa na página e gire ao redor dessa dobradiça. |
| O card se levanta antes de ficar visível. | Relacione sua elevação à passagem da câmera por aquele ponto. |
| O título fica ilegível. | Encurte o texto, ajuste o ângulo do card ou dê mais tempo àquele momento. |
| A página fica cortada na vista de cima. | Eleve a câmera ou ajuste o enquadramento antes de mudar o design da página. |
O exemplo calcula a animação a partir do quadro do vídeo, facilitando a inspeção de momentos específicos. A documentação de useCurrentFrame do Remotion explica essa temporização por quadros. Depois de inspecionar quadros isolados, reproduza a sequência completa para avaliar a conexão entre eles. Quando a prévia estiver pronta, confira também o vídeo exportado.
Para um lançamento centrado em uma página web, isso oferece uma estrutura concreta de movimento para adaptar. Se a história trata de um objeto de interface que muda de estado, o tutorial de animação UI morph usa outra abordagem. Para outros formatos de lançamento, veja os exemplos de vídeos de lançamento de produtos. Para uma apresentação mais ampla do produto, conheça o criador de vídeos promocionais do iArt.
FAQ
Quanto custa criar um sobrevoo de site no iArt?
A última solicitação ao Haiku 5.5 neste exemplo usou cerca de US$ 0,02 em créditos, com o código da cena já preparado. Esse é o custo de uma solicitação, sem incluir tentativas anteriores e exportação; começar do zero ou fazer mais revisões custa mais. Novas contas recebem US$ 2 em créditos gratuitos no cadastro, sem cartão de crédito, para experimentar a geração e edição de animações. O download de MP4 exige um plano pago. Consulte os preços do iArt para ver os detalhes atuais dos planos.
O que é um sobrevoo de site?
É um vídeo em que uma câmera virtual percorre uma página web em perspectiva. Ele pode destacar seções por meio de closes ou elementos elevados e depois se afastar para mostrar como essas partes se conectam.
O que devo incluir em um prompt de sobrevoo de site?
Inclua o título da página, três mensagens curtas sobre funcionalidades, as cores da marca e o percurso da câmera. Especifique onde cada card está preso, quando ele se levanta e onde a câmera termina. Esses detalhes fornecem movimentos concretos para verificar na prévia.
Posso usar uma captura do meu próprio site?
Uma captura pode servir de superfície para a página, mas não fornece cards móveis por conta própria. Cada card precisa de uma camada separada alinhada à sua posição na página. O enquadramento e as posições dos cards devem corresponder ao seu layout.
Um sobrevoo de site é igual a uma gravação de tela?
Uma gravação de tela captura a interação com um site funcional. Um sobrevoo apresenta o design por meio de uma câmera animada e pode levantar partes do layout no espaço. Use uma gravação para mostrar cliques exatos e o funcionamento do produto; use um sobrevoo para apresentar a página e suas mensagens principais.
Posso transformar isso em um Reel ou Short vertical?
O exemplo usa uma tela 16:9. Uma versão vertical precisa de uma nova revisão do enquadramento: mantenha o card principal e seu título visíveis, ajuste a distância da câmera e confira a vista da página inteira. Um corte central pode cortar os cards.