motion

O que motion faz?

Motion graphics escritos como código: cada cor, tempo e margem vem de um arquivo de marca, e nada é renderizado sem que a pessoa tenha visto antes 2 ou 3 quadros. As regras abaixo vêm de correções reais; cada uma diz por que existe.

Para que serve

Peça	O que é
Broll animado	Cobre um trecho de voz com uma cena ou um gráfico, em tela cheia
Alfa	Gráfico com transparência que vai sobre o vídeo, ou atrás da pessoa
Pop-up	Um dado que entra, é lido em pouco mais de 1 s e sai
Legendas	Sem caixa e com uma palavra destacada, ou cinéticas (apenas palavras-chave)
Simulação de chat	Uma conversa de um aplicativo de mensagens, crível e legível
Tela	Um site ou um app de desktop em um cartão 4:3 com título
Capa	O quadro 0 do reel

Antes de diagramar, decida qual das duas formas é:

1. Mostra dados ou um produto por dentro (painel, métricas, bandeja): interface plana e densa, tudo legível ao mesmo tempo, fotos e vídeos reais dentro dos cartões, câmera quase parada (escala 1,00 → 1,02). Os estados mudam no lugar: a linha já estava e sua etiqueta muda. O quadro, cheio.
2. Conta uma cena: comanda o material. Plano grande, câmera que se move de verdade, pouco adorno e uma única frase.

Um diagrama não é uma peça: se a ideia pode ser desenhada como um mapa de setas, mostre o produto fazendo exatamente isso.

Preparação

• Um projeto Remotion (npx create-video@latest), Node e ffmpeg.
• A marca em código em src/marca/: tokens.ts (cores, tipos, raios, margens), movimento.ts (tempos e curva) e um useMarca() que entrega tudo escalado. Como montar, com um exemplo: referencias/tokens.md.
• Uma entrada por peça (src/pecas/<peca>.tsx, com seu registerRoot e suas Composition): o bundle fica pequeno e uma peça não quebra outra.
• Lienzo de 1080×1920 a 30 fps, a menos que a sequência diga o contrário: leia o tamanho e os fps da sequência antes de começar.

O fluxo

1. Brief. Trecho exato na sequência (entrada → saída), o que a voz diz nesse trecho, dados permitidos e sua fonte, material que pode ser usado e o que não quer. Se faltar algo, pergunte.
2. Voz. Transcreva por palavra a voz tal como está na linha do tempo, não o arquivo bruto (referencias/legendas.md). A voz real de uma gravação costuma diferir do roteiro.
3. Duração. A do trecho, em uma constante com o timecode no comentário, mais 1 quadro de margem: export const DURACAO = 157; // 00:00:51:22 → 00:00:56:29.
4. Design. O que se vê é o que a voz diz, frase a frase. Os instantes que compartilham animação e som (cada mensagem que entra, cada golpe) vão em uma constante que a composição e o script de efeitos leem.
5. Esboço. 2 ou 3 quadros-chave com remotion still, com as guias de zonas seguras pintadas. Mostre-os e espere o sim.
6. Render com fundo ou com alfa (abaixo).
7. Som. Toda animação é entregue com seu efeito sonoro: passe os instantes para a skill sonido.
8. Controle e entrega (no final desta página).

O que não se quebra

• Nenhuma cor ou medida manual em uma composição: tudo vem dos tokens. Por que: mudar um tom é tocar um arquivo, e ninguém inventa um cinza novo em cada peça.
• Apenas uma coisa destacada por quadro, com a cor de acento da sua marca: uma palavra do título ou um botão, nunca ambos. Por que: se duas coisas gritam, nenhuma é lida. (As cores próprias de uma interface simulada não contam.)
• Nada quica. Entradas e saídas com os tempos e a curva dos tokens; nada de spring(). Por que: spring() passa e volta, e isso é lido como brinquedo.
• Tempos em segundos, nunca em quadros. Por que: com atrasos em quadros, passar de 30 para 60 fps dobra a velocidade.
• Zonas seguras, com ar (tabela de números). O que se lê vai a ~100 px dos lados e a ~290 do teto: 54 e 224 são a linha que não se pisa, não onde o design se apoia. Por que: a interface do app tampa as bordas, e colado ao limite "vê-se tudo muito nas extremidades".
• O centro da composição, em x 540. Não se desloca o design para evitar os botões do app: o que cai nessa altura se estreita de forma simétrica. Por que: uma composição deslocada nota-se mais do que um ícone sobre.
• Cada objeto inteiro dentro do quadro. Nada cortado pela borda; o que não protagoniza o plano se afasta com um fade. Por que: um telefone ou um cartão cortados são lidos como erro.
• Em um broll, algo acontece: a câmera se move e ocorre uma ação concreta que é a frase da voz, não o tema. Por que: "não acontece nada" é a rejeição mais comum. A exceção é o produto real de um cliente: ele é reproduzido, não recriado nem se inventam movimentos.
• Algo novo a cada 4 s no máximo, e nunca dois movimentos iguais seguidos. Por que: duas aproximações coladas apagam o corte.
• Nada parado no final: um empurrão lentíssimo no último trecho. Por que: um plano congelado é lido como erro de render.
• Um número que sobe é um gráfico; um que aparece é um rótulo. Em um alfa, cada número leva seu objeto animado (contador, medidor, barra, ícone que age) e o texto acompanha. Por que: um texto plano sobre o vídeo é lido como legenda.
• Plano-sequência, profundidade e detalhe. Uma câmera que percorre a cena em vez de entradas soltas, objetos em diferentes profundidades, nomes, horas e estados em cada elemento. Por que: as peças que eram diagramas com muito branco foram rejeitadas por "muito simples".
• Legendas sem caixa, uma palavra destacada por oração; nunca sobre um broll nem onde um gráfico já diz o mesmo (referencias/legendas.md).
• Chat simulado legível: telefone ao centro, o app inteiro ampliado por igual, uma mensagem por vez com tempo para ler; para destacar, desfoca-se o resto, nunca um véu escuro (referencias/alfas-e-chats.md).
• Uma tela real no plano comanda: nada sobre seu texto nem seu cabeçalho; o pop-up vai em sua zona vazia.
• Sem bordas pretas nem cantos duros: se a câmera se move sobre material, escala mínima 1,04 (1,18 se o plano se desloca lateralmente); gradientes de passos suaves e cantos arredondados. Por que: um zoom out que mostra preto, ou um gradiente aos saltos, é lido como um recorte.
• Não se inventam dados nem se repetem peças. Números, nomes e capturas vêm da pessoa; uma simulação nunca mostra dados de clientes reais. Cada peça traz seu próprio gráfico: repetir o de outra nota-se.
• As animações se ajustam à voz, nunca o contrário: não se inserem pausas na voz para encaixar um gráfico.
• Uma correção não é renderizada inteira: apenas os trechos que mudam, emendados e com nome novo (referencias/3d-e-armadilhas.md). Por que: a versão já colocada não é sobrescrita, e não se perde uma hora de render por três segundos.

Números

O quê	Valor (lienzo de 1080×1920)
Laterais	54 px de cada lado (o que se lê, a ~100)
Teto	nada para ler acima de y 224 (o que se lê, a partir de ~290)
Faixa de leitura	de y 420 a y 1495
Coluna de botões	a partir de x 897, de y 1228 para baixo; nessa altura, o que se lê vai dentro de x 183–897
Número grande e largo	inteiro acima de y 1228
Telefone em close-up	no máximo 0,8 da largura do quadro
Conjunto em plano aberto	no máximo 1080 − 2 × 54 de largura
Pop-up	pouco mais de 1 s na tela, e sai (se ficam, aos 8 s há seis e não se lê nenhum)
Ritmo	algo novo a cada 4 s ou menos
Escala mínima com câmera sobre material	1,04 (1,18 com deslocamento lateral)
Preenchimento de uma peça de dados	perto de 75 % da caixa útil; abaixo de 50 % é lido como esboço
Preenchimento de uma peça de cena	40–60 %
Recortes de capa	4:5 do feed: y 285–1635 · 3:4 do perfil: y 240–1680

O preenchimento é a parte da caixa útil ocupada por algo que não é fundo; mede-se sobre os stills, não a olho.

Render

# Esboço: um quadro solto
npx remotion still src/pecas/minha-peca.tsx MinhaPeca out/esboco_f45.png --frame=45

# Com fundo (opaco: tampa o plano)
npx remotion render src/pecas/minha-peca.tsx MinhaPeca out/minha-peca_FUNDO.mov \
  --codec=prores --prores-profile=4444 --pixel-format=yuv444p10le

# Com alfa (transparente: vê-se o vídeo de baixo)
npx remotion render src/pecas/minha-peca.tsx MinhaPeca-Alfa out/minha-peca_ALFA.mov \
  --codec=prores --prores-profile=4444 --pixel-format=yuva444p10le --image-format=png

# Toda peça com 3D (CSS ou three.js), em still e em render:  --gl=angle

• Fundo e alfa são a mesma composição com uma prop transparente; a versão em alfa não pinta o lienzo e seu id termina em -Alfa.
• --prores-profile=4444 sozinho não dá alfa. Verifique: ffprobe -v error -select_streams v:0 -show_entries stream=pix_fmt -of csv=p=0 out/minha-peca_ALFA.mov tem que começar com yuva.
• Em alfa não há lienzo: cada texto precisa de sua própria superfície ou desaparece sobre material escuro.
• Se o disco está justo: o ProRes 4444 com alfa ocupa ~1,35 GB por minuto a 1080. Convertê-lo para PNG dentro de MOV (ffmpeg -i x.mov -c:v png -pix_fmt rgba y.mov) é sem perda, preserva o alfa e pesa cerca de 7,5 vezes menos.
• Interfaces com perspectiva que saem com o texto borrado: renderize com --scale=2 e reduza para 1080 com lanczos.
• Para vários stills, um script que faz um único bundle e o apaga ao terminar (referencias/3d-e-armadilhas.md).

Capa no quadro 0

• A capa é o primeiro quadro do reel exportado: <Sequence durationInFrames={1}> com a capa e o reel inteiro em <Sequence from={1}>. As plataformas escolhem a capa entre os quadros do vídeo; assim não fica um arquivo solto. Se o seletor não acertar o 0, dê dois quadros.
• Personagem ao centro: eixo em x 540, seu centro perto de y 900–960, e inteiro dentro do 4:5 e do 3:4, com o título também dentro. Por que: a grade do perfil e do feed recortam a capa, e na miniatura decide-se o clique.
• Nada de decoração grande nos cantos. Antes de entregar, faça uma versão com os recortes simulados (véu fora do 4:5, linhas do 3:4 e eixo central) e olhe.
• Se a capa for colada com ffmpeg a partir de um JPG, cuidado com a faixa de cor (referencias/3d-e-armadilhas.md).

Estilo "liquid glass" (opcional)

Vidro tipo iOS para cartões e botões, sobre fundo claro. Funciona se houver algo para refratar, uma única luz para toda a cena e coisas vivas dentro; senão, "parece um folheto". Regras e números em referencias/cristal.md, que também explica como tampar texto queimado no material. Nenhum estilo é para sempre: cada peça traz algo que as anteriores não tinham.

Armadilhas que mais custam

• Vídeo congelado: um <OffthreadVideo> que entra após o quadro 0 deve ir dentro de <Sequence from={entrada} layout="none">. Senão, ele pede o tempo desde o 0 da composição e fica parado em seu último quadro, sem dar erro. Verifique se startFrom + duração visível ≤ duração do clipe.
• Primeiro quadro preto no three.js com pós-processamento: o compositor precisa pedir delayRender e desenhar antes de liberá-lo. Um remotion still solto é o teste.
• 3D cortado em reto (meio telefone em branco): falta --gl=angle.
• Cópias fantasma do texto com desfoque de movimento a 29,97 fps: o desfoque, apenas nas janelas em que a câmera varre.
• Disco cheio: cada bundle copia public/ para a pasta temporária do sistema; se não for apagada, acumula-se (em um caso real, centenas de GB). Veja df -h antes de renders longos.
• defaultProps se misturam com as props de cada render: nos defaults, apenas o obrigatório.

O resto (aparelhamento 3D em CSS, three.js, emendas, ffmpeg, zsh): referencias/3d-e-armadilhas.md.

O que se entrega e o que se verifica

Entrega-se: o .mov (FUNDO ou ALFA) com a duração exata do trecho e seu efeito sonoro dentro ou ao lado, os stills de esboço aprovados e uma linha em peca.md com o feito e o pendente.

Verifica-se, medindo:

• Duração e fps iguais aos da sequência. Conte pacotes (ffprobe -v error -count_packets -show_entries stream=nb_read_packets -of csv=p=0 x.mov): em ProRes, nb_frames mente.
• Alfa de verdade: pix_fmt começa com yuva.
• Nada fora das zonas seguras: guias pintadas sobre os stills dos momentos-chave e a tinta medida na faixa do texto (x mínima ≥ 54, x máxima ≤ 1026).
• Apenas uma coisa destacada por quadro.
• Nenhum vídeo congelado nem quadro preto: reproduza, não fique apenas nos stills.
• Quadro a quadro onde entra uma mensagem ou a câmera varre: nem saltos nem fantasmas.
• O último quadro, completo e com algo em movimento.
• npm run lint (eslint + tsc) passa, e não há um #hex solto fora dos tokens.