🧬 Padrões de Combinação

O prop from da Sequence diz em que frame aquele bloco de conteúdo começa a existir na linha do tempo.

É a base de todo stagger e de toda sincronização entre elementos — sem ele, tudo aparece no frame 0 simultaneamente.

from = delay em frames · frame local reinicia em 0 · combina com durationInFrames.

Padrão em que cada item de uma lista começa N frames depois do anterior: from={index * 5}.

Cria a sensação de "cascata" que torna listas e menus muito mais elegantes do que todos entrando juntos.

N = 4–8 frames é o ponto doce · muito grande = lento demais · index vem do .map().

Iniciar o elemento B alguns frames antes do A terminar — criando sobreposição proposital e fluidez.

Elimina os buracos de "tela vazia" que fazem o vídeo parecer amador e desloca a atenção suavemente.

from_B = from_A + dur_A - overlap · overlap típico = 6–12 frames.

Guardar os offsets em variáveis nomeadas (const TITLE_START = 0; const LIST_START = 20;) em vez de números mágicos soltos.

Quando você precisa mudar um timing, só muda um número e tudo que depende dele atualiza junto.

constantes no topo do componente · derivar: LIST_START = TITLE_START + TITLE_DUR · sem magic numbers.

Quando múltiplos elementos não têm from, todos aparecem no frame 0 criando um flash de informação sobrecarregado.

O frame 0 é a primeira impressão do vídeo — jogar tudo lá é o equivalente a gritar tudo ao mesmo tempo.

regra: cada elemento tem seu from · frame 0 = apenas o elemento principal · stagger os demais.

Dentro de uma Sequence o frame local começa em 0 — então spring({frame, fps}) dispara fresquinho a cada entrada.

Combinar Sequence + spring é o padrão de entrada escalonada mais natural do Remotion, usado em 70% dos 81 templates.

frame local · spring começa em 0 · cada item tem sua mola independente.

Múltiplos <AbsoluteFill> irmãos — cada um ocupa 100% do espaço, empilhados como transparências.

Sem isso, você tentaria usar position/z-index na mão e quebraria o layout responsivo do Remotion.

posição absolute · fill 100% · ordem = z · irmãos, não filhos.

A convenção padrão: primeiro o Background (vídeo/gradiente), depois o conteúdo principal (título, lista), por último o overlay (vinheta, fade).

Inverter a ordem faz o fundo cobrir o texto — erro visual imediato que confunde o espectador.

último filho = mais na frente · fundo = primeiro · overlay = último.

Uma camada semitransparente preta entre o fundo e o texto aumenta contraste sem esconder o Background.

Texto branco sobre vídeo colorido sem overlay é ilegível em 80% dos casos — o overlay resolve em 2 linhas.

rgba(0,0,0,0.4) · testar com conteúdo real · não exagerar (≤0.6).

Cada AbsoluteFill pode ter sua própria opacidade animada — fundo faz fade-in enquanto conteúdo ainda aguarda.

Permite revelar o fundo antes do texto, criando hierarquia visual temporal sem código complicado.

style={{opacity}} · combina com Sequence · opacidade 0 oculta mas mantém espaço.

Regra de design: no máximo 1–2 elementos devem ser o foco principal. Os demais são suporte.

Quando fundo, texto e ícone animam com a mesma intensidade, o espectador não sabe onde olhar.

fundo = sutil · conteúdo = destaque · overlay mascara o excesso.

No Remotion Studio é possível inspecionar cada elemento, ver sua posição na hierarquia e identificar o que está cobrindo o quê.

Sem essa habilidade, depurar um overlay que "sumiu" pode levar horas; com ela, segundos.

DevTools · outline temporário · opacity: 0.5 para revelar camadas ocultas.

<Series> coloca cada <Series.Sequence> automaticamente uma após a outra, calculando os offsets.

Montar 3+ cenas com Sequence manual requer cálculo de from; Series elimina esse trabalho e mantém o código legível.

durationInFrames por cena · ordem = tempo · fácil de reordenar.

Cada cena deve durar o suficiente para o espectador absorver o conteúdo — mínimo ~60 frames (2s a 30fps) para textos.

Cenas curtas demais geram ansiedade; longas demais ficam chatas. O equilíbrio é o que diferencia produção amadora da profissional.

mínimo 2s para texto · 3–5s para conceitos complexos · testar lendo em voz alta.

@remotion/transitions oferece TransitionSeries com fade, slide, wipe — sem calcular sobreposição na mão.

Uma transição bem escolhida conecta cenas emocionalmente; um corte seco também pode ser intencional — saber quando usar cada um é o que conta.

fade = neutro · slide = movimento · wipe = revelação · duração = 10–20 frames.

Cortes rápidos (1–2s por cena) criam energia; lentos (4–6s) criam peso e contemplação. A escolha comunica intenção.

Um tutorial técnico funciona melhor lento; um highlight reel funciona rápido. Ritmo errado sabota o conteúdo.

tipo de conteúdo define ritmo · consistência dentro do vídeo · variação intencional cria pico.

Calcular em que frame cai cada batida (frame = beat * fps * (60/bpm)) e alinhar os cortes de cena a esses frames.

Vídeos com cortes na batida parecem produzidos profissionalmente mesmo com visuais simples.

frameDaBatida = (60/bpm) * fps · múltiplos de 4 compassos · usar Audio do Remotion como referência.

A última cena deve resolver: fade-out suave, logo/CTA aparece, ou simplesmente a tela escurece — sem cortar abruptamente.

Um fechamento ruim desfaz toda a impressão positiva construída durante o vídeo — é o que o espectador lembra.

fade-out final = obrigatório · duração da última cena generosa · CTA no último terço.