Astra profundo · Capítulo 17 de 31 · 30 min
Construir profundidade com planos no scroll
Você sai com uma abertura em camadas que apresenta a exposição do Aurora e funciona no celular.
Este capítulo faz parte do curso gratuito Astra profundo.
O Estúdio Aurora, caso fictício, vai apresentar uma instalação de luz. A abertura da landing pode convidar o visitante a entrar na cena: uma fotografia compõe o fundo, uma estrutura luminosa ocupa o plano intermediário e o título aparece à frente. Nesta aula, você projeta essa relação e entrega uma sequência curta de scroll com começo, transformação e chegada à galeria.
Uma imagem grande já pode oferecer boa composição. A profundidade acrescenta relações entre elementos: o que está perto se move de uma maneira, o que está longe responde de outra, e a sobreposição revela distância. Esse mecanismo de paralaxe funciona quando os planos têm independência perceptível. Mover uma fotografia inteira para cima produz deslocamento, mas não cria por si só separação espacial.
Profundidade que explica o espaço
Fundo, meio e texto percorrem distâncias diferentes.
Transcrição
0:00O plano de fundo se desloca lentamente. Ele cria o contexto sem disputar a leitura da mensagem.
0:07O plano intermediário percorre uma distância maior. A diferença de velocidade torna visível a separação entre as camadas.
0:14O texto permanece em uma área de leitura estável enquanto os planos se movem. No site, ofereça uma experiência estática para movimento reduzido.
Três planos, uma aproximação
| Plano | Composição inicial | Durante o scroll |
|---|---|---|
| Fundo | Sala e iluminação ambiente | Deslocamento discreto |
| Intermediário | Escultura recortada e apoiada | Escala orientada pelo ponto de contato |
| Texto | Título completo em área legível | Transição para a introdução da galeria |
No exemplo resolvido, a escultura toca o chão. Se você ampliar apenas a escultura ao redor do centro, a base parece deslizar. Defina o ponto de transformação próximo ao contato e ajuste o fundo de maneira compatível. A decisão nasce da cena: o visitante deve perceber aproximação da câmera, mantendo a escultura apoiada onde estava.
Aprofunde as decisões desta aula
Como preparar os planos antes da implementação?
Planeje a cena antes de pedir os arquivos ao Astra. Escolha a imagem de fundo, marque o objeto que será recortado e reserve uma área de leitura para o título. Descreva também onde a sequência termina. No Aurora, o objeto luminoso cresce levemente durante a aproximação e depois permanece numa fotografia estável que introduz as obras da exposição. O procedimento de Nate Herk no [guia Scrollcraft](https://github.com/nateherkai/scroll-craft/blob/main/plugins/nateherk-design/skills/scroll-craft/references/hero-depth.md) oferece uma referência prática: reconstruir o fundo atrás do recorte, preparar transparência real e preservar pontos de contato. São técnicas de composição que podem ser executadas por diferentes ferramentas. O ganho de usar Astra está em coordenar preparação, implementação e inspeção no mesmo trabalho.
Como distribuir o movimento e adaptar a cena ao celular?
Distribua o movimento por uma sequência curta e legível. No início, o título aparece inteiro; no meio, a relação entre escultura e fundo se destaca; na saída, a galeria assume a página. Você pode implementar a composição com elementos separados, posicionamento sticky e transformações. A biblioteca serve à sequência escolhida; uma cena simples pode dispensar um ambiente tridimensional completo. Faça uma composição própria para o celular. Em vez de reduzir proporcionalmente o desktop, reposicione o recorte e reavalie a quebra do título. Uma escultura estreita pode funcionar atrás de duas linhas; uma peça larga talvez fique melhor abaixo delas. Preserve o gesto narrativo de aproximação, mesmo que a distância percorrida seja menor. A inspeção precisa observar início, meio e fim, além de pontos entre eles. Peça ao Astra capturas nessas posições e compare bordas, contato com o chão e leitura do título. Teste também a apresentação estática com movimento reduzido. A galeria deve continuar acessível e a fotografia inicial precisa sustentar a identidade da exposição sozinha.
Seu entregável é uma abertura editável com os planos organizados, acompanhada de uma folha de contato. Essa folha reúne capturas da sequência e torna a direção de arte discutível sem exigir que todos abram o projeto. Ao revisar com a equipe do Aurora, você consegue apontar exatamente qual quadro precisa de ajuste e preservar o restante da composição.
Faça agora: monte a abertura
Use uma fotografia e um recorte para manter a prática dentro de 30 minutos.
Passo 1: Desenhe os estados
Anote o enquadramento inicial, a aproximação intermediária e a chegada à galeria.
Deu certo quando: Cada estado comunica uma ideia.
Passo 2: Prepare os planos
Separe fundo e escultura, reconstruindo a área que ficará exposta durante o deslocamento.
Deu certo quando: O recorte revela um fundo contínuo.
Passo 3: Implemente a sequência
Peça ao Astra o scroll com planos independentes e uma composição própria para celular.
Deu certo quando: A escultura permanece apoiada.
Passo 4: Compare os quadros
Capture três posições e a alternativa estática, ajustando leitura e enquadramento.
Deu certo quando: A exposição se apresenta em todas as condições.
No fim você tem: Abertura em camadas e folha de contato com os estados de scroll.
Profundidade depende da relação entre planos. O ponto de contato orienta escala e deslocamento. As capturas tornam a sequência revisável.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- CursoEscrever bem com IAsugerido pelo grafoAs primeiras aulas do Astra pedem um briefing com referências e dirigem cada iteração por texto. O curso de escrita ensina a decidir o que pedir, dar contexto e conferir a saída, que é a base dessas aulas. Ordem decidida quando o Astra ganhou uma página por aula (Etapa 4, wave 3), para que as 31 aulas mostrem o que estudar antes.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo4 capítulos de “Astra profundo” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
O mesmo assunto em outros cursos
- Vídeo com IA: Claude Code, Codex e ElevenLabsMontar vídeo em HTML com HyperFrames e escolher entre ele e o RemotionExaminar conexões de Montar vídeo em HTML com HyperFrames e escolher entre ele e o Remotion
- Frontends com VibecodingProjetar movimento, assinatura e narrativas por rolagemExaminar conexões de Projetar movimento, assinatura e narrativas por rolagem
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
