🏗️ AbsoluteFill aninhado — a pilha de camadas
AbsoluteFill é um componente do Remotion que renderiza uma div com position: absolute; top: 0; left: 0; width: 100%; height: 100%. Quando você coloca dois ou mais como irmãos (não como filhos um do outro), eles se empilham — exatamente como transparências fotográficas colocadas uma sobre a outra.
import { AbsoluteFill } from "remotion"; export const LayeredScene = () => ( {/* Container principal */} <AbsoluteFill> {/* CAMADA 1 — fundo (renderizado primeiro = mais atrás) */} <AbsoluteFill> <Background /> </AbsoluteFill> {/* CAMADA 2 — conteúdo principal */} <AbsoluteFill style={{ display: "flex", alignItems: "center" }}> <Title /> </AbsoluteFill> {/* CAMADA 3 — overlay (renderizado por último = mais na frente) */} <AbsoluteFill style={{ background: "rgba(0,0,0,0.3)" }} /> </AbsoluteFill> );
💡 Dica prática
A ordem de declaração no JSX é a ordem de renderização (z-index implícito). O último filho fica na frente. Isso é diferente de z-index CSS — aqui a estrutura do código é a documentação visual.
🎨 Fundo → conteúdo → overlay
A convenção de 3 camadas é universal em edição de vídeo: o fundo (Background) carrega a ambiência visual, o conteúdo (Conteúdo) entrega a mensagem, e o overlay finalmente une tudo e garante legibilidade. Inverter qualquer camada quebra imediatamente a hierarquia.
✓ Ordem correta
- 1.Background — vídeo, gradiente, imagem de fundo.
- 2.Conteúdo — título, lista, ícone principal.
- 3.Overlay — vinheta, gradiente, fade-out de borda.
✗ Erros comuns de ordem
- ✗Overlay antes do conteúdo — conteúdo fica por baixo do escurecimento.
- ✗Fundo depois do conteúdo — fundo cobre o texto.
- ✗Tudo dentro de um único AbsoluteFill com position manual.
🌫️ Vinheta e overlay escuro — legibilidade
O problema mais comum ao combinar vídeo de fundo com texto é a legibilidade. Um fundo colorido e vibrante pode ter exatamente as mesmas tonalidades do texto branco — tornando-o invisível. A solução é uma camada semitransparente preta entre os dois.
📊 Valores de opacidade para overlay
- rgba(0,0,0,0.2) — sutil, para fundos já escuros. Mal perceptível.
- rgba(0,0,0,0.4) — padrão para a maioria dos casos. Bom equilíbrio.
- rgba(0,0,0,0.6) — fundos muito claros ou coloridos. Pode escurecer demais.
- rgba(0,0,0,0.8) — quase opaco. Use apenas para fade-out de cena.
const frame = useCurrentFrame(); // Overlay entra gradualmente nos primeiros 20 frames const overlayOpacity = interpolate( frame, [0, 20], [0, 0.4], { extrapolateRight: "clamp" } ); return ( <AbsoluteFill style={{ backgroundColor: `rgba(0,0,0,${overlayOpacity})` }} /> );
💡 Dica prática
Antes de definir o valor do overlay, abra o frame mais "problemático" (geralmente com o fundo mais claro ou colorido) e ajuste até o texto ser legível confortavelmente — não só "tecnicamente legível".
🎚️ Opacidade por camada — fade independente
Cada AbsoluteFill pode ter sua própria opacidade animada de forma independente. Isso cria efeitos de revelação em cascata: o fundo pode fazer fade-in nos primeiros 20 frames enquanto o conteúdo espera até o frame 30. O espectador percebe o contexto antes da mensagem.
Fundo faz fade-in (frames 0–20)
O Background revela o ambiente visual — o espectador já sabe onde está antes de ver a mensagem.
Overlay acompanha o fundo (frames 5–25)
Garante que quando o texto aparecer, o fundo já estará escurecido o suficiente para contraste.
Conteúdo entra por último (frame 25+)
Com o contexto estabelecido e o overlay pronto, o conteúdo entra sobre um canvas legível.
⚖️ Não competir por atenção
Design de vídeo é uma questão de foco. Em cada momento, deve haver um elemento principal que domina a atenção. Quando fundo, texto e ícone animam com a mesma intensidade simultaneamente, o espectador fica desorientado — olha para tudo sem ver nada.
✓ Hierarquia de atenção
- ✓Fundo: animação sutil e lenta (não distrai).
- ✓Conteúdo: animação de entrada expressiva (este é o foco).
- ✓Decoração: opacidade baixa, sem movimento.
✗ Caos visual
- ✗Fundo com partículas rápidas e brilhantes por todo o vídeo.
- ✗Título e subtítulo com spring diferente animando juntos.
- ✗4+ elementos com cor saturada competindo na mesma cena.
💡 Regra do foco único
Pause o vídeo em qualquer frame e faça a pergunta: "onde o olho vai naturalmente?". Se a resposta não for imediata e clara, o frame está sobrecarregado. Reduza a intensidade dos elementos de suporte até o foco ser óbvio.
🔍 Depurar camadas no Studio
Quando uma camada "desaparece" ou fica invisível inesperadamente, a técnica de depuração mais rápida é dar um outline temporário em cada AbsoluteFill ou aumentar sua opacidade para identificar exatamente onde ela está na pilha.
// Técnica 1: outline colorido para ver bordas <AbsoluteFill style={{ outline: "2px solid red" }}> <Background /> </AbsoluteFill> // Técnica 2: opacidade 0.5 para revelar sobreposição <AbsoluteFill style={{ opacity: 0.5 }}> <Overlay /> </AbsoluteFill> // Técnica 3: comentar camadas individualmente {/* <AbsoluteFill><Background /></AbsoluteFill> */}
📌 Resumo do módulo
Próximo módulo:
3.3 — Ritmo & Transições entre Cenas: Series, durações que respiram e como casar com a batida.