🧠 Fundamentos

Hook que devolve o número do frame atual sendo renderizado (0, 1, 2, …). É a única entrada de tempo que você precisa.

Toda animação no Remotion deriva desse número. Sem ele, nada se move.

Reativo ao frame · re-renderiza a cada frame · base de interpolate e spring.

fps = frames por segundo; durationInFrames = comprimento do vídeo em frames. 90 frames a 30fps = 3 segundos.

Define a janela de tempo que você tem para animar e como segundos viram frames.

segundos × fps = frames · definidos na Composition · constantes durante o render.

Hook que devolve width, height, fps e durationInFrames da composição atual.

Deixa o componente responsivo ao tamanho do vídeo (16:9, 9:16) sem hardcode.

centralizar com width/2 · converter segundos com fps · reuso entre formatos.

A imagem de cada frame depende SÓ do número do frame — não de cliques, timers ou estado acumulado.

É o que torna o render paralelizável e previsível. Nada de setInterval ou requestAnimationFrame.

função pura frame→pixels · sem useState para animar · sem efeitos de tempo real.

Renderizar o frame 42 hoje ou amanhã produz exatamente a mesma imagem.

Permite o Remotion renderizar frames em paralelo em várias máquinas sem inconsistência.

evite Math.random sem seed · evite Date.now() · use random() do Remotion.

A unidade de trabalho é o frame. "Aparece em 0,5s" vira "aparece em 15 frames" (a 30fps).

Toda a API (interpolate, spring, Sequence) fala em frames. Pensar assim elimina conversões confusas.

frame = unidade · segundos só na borda (input do usuário) · fps converte.

interpolate(frame, [in0,in1], [out0,out1], options) — o frame entra, um valor sai.

É a ferramenta universal de animação linear. 90% dos templates abrem com ela.

1º arg = valor a mapear · arrays de mesmo tamanho · retorna número.

inputRange é o domínio (ex: frames 0→30); outputRange é o contradomínio (ex: opacidade 0→1).

Controlar esses dois pares é controlar quando e quanto algo muda.

input crescente · output em qualquer ordem · unidades livres (px, %, deg).

extrapolateLeft/Right: 'clamp' trava o valor nos limites; 'extend' deixa passar além.

Sem clamp, a opacidade passa de 1 e o elemento "estoura". É o bug mais comum de iniciante.

clamp = padrão seguro · extend para movimento contínuo · identity raramente.

Arrays com 3+ pontos: [0,15,75,90] → [0,1,1,0] faz fade-in, segura, fade-out.

Uma única chamada descreve um ciclo completo de entrada e saída.

input sempre crescente · platôs = valores repetidos · economiza código.

A opção easing troca a interpolação linear por curvas (Easing.out, cubic, bezier).

Movimento linear parece robótico. Easing dá naturalidade sem trocar de função.

ease-out para entradas · ease-in para saídas · bezier para controle fino.

Três receitas: opacidade (fade), translateX/Y (slide) e scale (zoom) — todas com interpolate.

Combinadas, essas três cobrem a maioria das entradas de elementos em vídeo.

aplicar no style/transform · combinar 2-3 ao mesmo tempo · base de toda a T2.

Função que simula uma mola: vai de 0 a 1 com aceleração e leve overshoot natural.

Dá aquele "pop" orgânico em entradas de título e logo que o interpolate linear não consegue.

recebe frame e fps · retorna 0→1 · multiplique por escala/posição.

Parâmetros da mola: damping (atrito), stiffness (rigidez), mass (peso).

Ajustam de "elástico saltitante" a "suave e firme" sem mexer no resto do código.

damping alto = sem overshoot · stiffness alto = mais rápido · mass alto = mais lento.

interpolate = controle exato de tempo/valor; spring = naturalidade física automática.

Escolher errado deixa a animação ou robótica ou imprevisível na duração.

spring para entradas/pop · interpolate para fades/timing preciso · dá pra combinar.

Componente que desloca o tempo dos filhos: from atrasa o início, durationInFrames limita.

Dentro de uma Sequence, o frame "reinicia" do zero — facilita cenas independentes.

from = offset · frame local · base do stagger e da T3.

Div que preenche 100% da composição em position absolute — empilha fundo, conteúdo e overlay.

É como você sobrepõe um título sobre um fundo animado sem cálculo de layout.

ordem = camadas (z) · centralizar com flex · base de toda composição visual.

Series.Sequence coloca cenas uma após a outra automaticamente, sem calcular offsets na mão.

Monta um vídeo de várias cenas (intro → conteúdo → outro) de forma legível.

duração por cena · ordem = tempo · ideal para os projetos da T4.